Ggtcf

Do creatures with a listed speed of "0 ft., fly 30 ft. (hover)" ever touch the ground?

Forgetting the musical notes while performing in concert

Ambiguity in the definition of entropy

What are the G forces leaving Earth orbit?

Does Dispel Magic work on Tiny Hut?

What is the most common color to indicate the input-field is disabled?

Was the old ablative pronoun "med" or "mēd"?

Was the Stack Exchange "Happy April Fools" page fitting with the '90's code?

Theorists sure want true answers to this!

What is the opposite of "eschatology"?

How to travel to Japan while expressing milk?

Can someone clarify Hamming's notion of important problems in relation to modern academia?

In the UK, is it possible to get a referendum by a court decision?

Is there a hemisphere-neutral way of specifying a season?

One verb to replace 'be a member of' a club

my venezuela girlfriend wants to travel the USA where i live.what does she need to do and how expensive will it become or how difficult?

Mathematica command that allows it to read my intentions

Fair gambler's ruin problem intuition

What's the meaning of "Sollensaussagen"?

Why were 5.25" floppy drives cheaper than 8"?

How to Prove P(a) → ∀x(P(x) ∨ ¬(x = a)) using Natural Deduction

Does the Idaho Potato Commission associate potato skins with healthy eating?

Why do I get negative height?

Different meanings of こわい

How to use properties of a Component in vue.js when input text changed?

React to property changes in JSON object using recursive components in Vue.jsVue.js pass data from slot into component instanceVue.js where to store non-component data properties?Vue.Js Multiple inputs with different typesAccessing and filtering child components defined in a Vue.js component's <slot>Vue.js 2 Multiple Properties defined in one Single-File componentvue.js - dynamically generated component in v-for does not update bound property correctlyUse @input or @change on input with value of computed propertyVue child component property does not workProps don't update when input changes in component

0

I'm using Vuesax Framework Components which it's working fine, but my in learning process for both laravel/vue.js and got a problem about how to use properties of component when input text got changed?

Consider this :

<vs-input
 style="width:100%"
 label="Label"
 danger-text="character"
 v-model="form.invoice_title"
 name="invoice_title"/>

in top code component gonna show me a input text with a red color with text which will tell use what is wrong, but in right idea i should make that red color show when something is wrong with inputs, like `input must be more than 3 Characters'.
Input Component in vuesax

So here's what i wanna do make my input activate/trigger :danger & danger-text properties when something is wrong Like:

inputs must be more than 6 and less than 80 characters.

vue.js vuejs2 vue-component

share|improve this question

asked Mar 8 at 21:11

Mohammad EskandariMohammad Eskandari

4710

add a comment | 

0

I'm using Vuesax Framework Components which it's working fine, but my in learning process for both laravel/vue.js and got a problem about how to use properties of component when input text got changed?

Consider this :

<vs-input
 style="width:100%"
 label="Label"
 danger-text="character"
 v-model="form.invoice_title"
 name="invoice_title"/>

in top code component gonna show me a input text with a red color with text which will tell use what is wrong, but in right idea i should make that red color show when something is wrong with inputs, like `input must be more than 3 Characters'.
Input Component in vuesax

So here's what i wanna do make my input activate/trigger :danger & danger-text properties when something is wrong Like:

inputs must be more than 6 and less than 80 characters.

vue.js vuejs2 vue-component

share|improve this question

asked Mar 8 at 21:11

Mohammad EskandariMohammad Eskandari

4710

add a comment | 

I'm using Vuesax Framework Components which it's working fine, but my in learning process for both laravel/vue.js and got a problem about how to use properties of component when input text got changed?

Consider this :

<vs-input
 style="width:100%"
 label="Label"
 danger-text="character"
 v-model="form.invoice_title"
 name="invoice_title"/>

in top code component gonna show me a input text with a red color with text which will tell use what is wrong, but in right idea i should make that red color show when something is wrong with inputs, like `input must be more than 3 Characters'.
Input Component in vuesax

So here's what i wanna do make my input activate/trigger :danger & danger-text properties when something is wrong Like:

inputs must be more than 6 and less than 80 characters.

vue.js vuejs2 vue-component

share|improve this question

asked Mar 8 at 21:11

Mohammad EskandariMohammad Eskandari

4710

<vs-input
 style="width:100%"
 label="Label"
 danger-text="character"
 v-model="form.invoice_title"
 name="invoice_title"/>

share|improve this question

asked Mar 8 at 21:11

Mohammad EskandariMohammad Eskandari

4710

share|improve this question

asked Mar 8 at 21:11

Mohammad EskandariMohammad Eskandari

4710

asked Mar 8 at 21:11

Mohammad EskandariMohammad Eskandari

4710

asked Mar 8 at 21:11

Mohammad EskandariMohammad Eskandari

4710

1 Answer
1

active

oldest

votes

1

This can be done via a computed property. eg:

<vs-input
 style="width:100%"
 label="Label"
 :danger="hasError"
 :danger-text="errorText"
 v-model="form.invoice_title"
 name="invoice_title"/>

... // in javascript

computed() 
 hasError() 
 return this.form.invoice_title.length < 6 
 errorText() 
 if (this.form.invoice_title.length < 6) 
 return 'Invoice title should be at least 6 characters'
 
 if (this.form.invoice_title.length > 80) 
 return 'Invoice title should be at most 80 characters'
 
 return ''
 

I highly recommend vuelidate lib form managing validation

share|improve this answer

answered Mar 9 at 7:07

AndyAndy

5,38022019

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  hasError work but errorText won't work. computed method when inputs go wrong it just say errorText
  
  – Mohammad Eskandari
  Mar 9 at 17:29
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  note that I used a colon (:) that designates it's a bound property, alias to v-bind:danger-text. If you don't it will just use the variable you give it as text.
  
  – Andy
  Mar 12 at 21:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  oh. i've got it done. thanks mate.
  
  – Mohammad Eskandari
  Mar 15 at 3:35
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55071048%2fhow-to-use-properties-of-a-component-in-vue-js-when-input-text-changed%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

This can be done via a computed property. eg:

<vs-input
 style="width:100%"
 label="Label"
 :danger="hasError"
 :danger-text="errorText"
 v-model="form.invoice_title"
 name="invoice_title"/>

... // in javascript

computed() 
 hasError() 
 return this.form.invoice_title.length < 6 
 errorText() 
 if (this.form.invoice_title.length < 6) 
 return 'Invoice title should be at least 6 characters'
 
 if (this.form.invoice_title.length > 80) 
 return 'Invoice title should be at most 80 characters'
 
 return ''
 

I highly recommend vuelidate lib form managing validation

share|improve this answer

answered Mar 9 at 7:07

AndyAndy

5,38022019

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  hasError work but errorText won't work. computed method when inputs go wrong it just say errorText
  
  – Mohammad Eskandari
  Mar 9 at 17:29
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  note that I used a colon (:) that designates it's a bound property, alias to v-bind:danger-text. If you don't it will just use the variable you give it as text.
  
  – Andy
  Mar 12 at 21:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  oh. i've got it done. thanks mate.
  
  – Mohammad Eskandari
  Mar 15 at 3:35
  

  
  
  
  

add a comment | 

1

This can be done via a computed property. eg:

<vs-input
 style="width:100%"
 label="Label"
 :danger="hasError"
 :danger-text="errorText"
 v-model="form.invoice_title"
 name="invoice_title"/>

... // in javascript

computed() 
 hasError() 
 return this.form.invoice_title.length < 6 
 errorText() 
 if (this.form.invoice_title.length < 6) 
 return 'Invoice title should be at least 6 characters'
 
 if (this.form.invoice_title.length > 80) 
 return 'Invoice title should be at most 80 characters'
 
 return ''
 

I highly recommend vuelidate lib form managing validation

share|improve this answer

answered Mar 9 at 7:07

AndyAndy

5,38022019

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  hasError work but errorText won't work. computed method when inputs go wrong it just say errorText
  
  – Mohammad Eskandari
  Mar 9 at 17:29
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  note that I used a colon (:) that designates it's a bound property, alias to v-bind:danger-text. If you don't it will just use the variable you give it as text.
  
  – Andy
  Mar 12 at 21:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  oh. i've got it done. thanks mate.
  
  – Mohammad Eskandari
  Mar 15 at 3:35
  

  
  
  
  

add a comment | 

This can be done via a computed property. eg:

<vs-input
 style="width:100%"
 label="Label"
 :danger="hasError"
 :danger-text="errorText"
 v-model="form.invoice_title"
 name="invoice_title"/>

... // in javascript

computed() 
 hasError() 
 return this.form.invoice_title.length < 6 
 errorText() 
 if (this.form.invoice_title.length < 6) 
 return 'Invoice title should be at least 6 characters'
 
 if (this.form.invoice_title.length > 80) 
 return 'Invoice title should be at most 80 characters'
 
 return ''
 

I highly recommend vuelidate lib form managing validation

share|improve this answer

answered Mar 9 at 7:07

AndyAndy

5,38022019

<vs-input
 style="width:100%"
 label="Label"
 :danger="hasError"
 :danger-text="errorText"
 v-model="form.invoice_title"
 name="invoice_title"/>

... // in javascript

computed() 
 hasError() 
 return this.form.invoice_title.length < 6 
 errorText() 
 if (this.form.invoice_title.length < 6) 
 return 'Invoice title should be at least 6 characters'
 
 if (this.form.invoice_title.length > 80) 
 return 'Invoice title should be at most 80 characters'
 
 return ''
 

share|improve this answer

answered Mar 9 at 7:07

AndyAndy

5,38022019

answered Mar 9 at 7:07

AndyAndy

5,38022019

answered Mar 9 at 7:07

AndyAndy

5,38022019