Styjun

Could all three Gorgons turn people to stone, or just Medusa?

Is it OK to throw pebbles and stones in streams, waterfalls, ponds, etc.?

Journal standards vs. personal standards

Is leaving out prefixes like "rauf", "rüber", "rein" when describing movement considered a big mistake in spoken German?

Active wildlife outside the window- Good or Bad for Cat psychology?

What are the children of two Muggle-borns called?

What verb for taking advantage fits in "I don't want to ________ on the friendship"?

Checkmate in 1 on a Tangled Board

How far can gerrymandering go?

German idiomatic equivalents of 能骗就骗 (if you can cheat, then cheat)

Grid: different background color (of row) based on values

Why wasn't ASCII designed with a contiguous alphanumeric character order?

Does "boire un jus" tend to mean "coffee" or "juice of fruit"?

Why do movie directors use brown tint on Mexico cities?

How does the 'five minute adventuring day' affect class balance?

The alcoholic village festival

Did the Russian Empire have a claim to Sweden? Was there ever a time where they could have pursued it?

How did they film the Invisible Man being invisible in 1933?

How can an inexperienced GM keep a game fun for experienced players?

Avoiding repetition when using the "snprintf idiom" to write text

Why is my 401k manager recommending me to save more?

Meaning of the word "good" in context

What happens if a caster is surprised while casting a spell with a long casting time?

Can dual citizens open crypto exchange accounts where U.S. citizens are prohibited?

how to enable v-model binding when building a custom components from other custom components

Vue 2 - Mutating props vue-warnUpdating a prop inside a child component so it updates on the parent container tooVue JS custom component v-modelSetting a 'default' v-on event for a component within VueVue.js Input value gets deleted on first char onlynested collapse component gets opens when parent component is opened in vueHow can I test a custom input Vue componentv-model in one component interfering with another component's v-modelVue: v-model and input event in custom component derived of a custom componentV-model with datepicker inputTwo way binding in render function in VuejsHow to build a vue form as a component

0

I am able to build a simple textbox component from <input /> and setup v-model binding correctly.

I'm trying to do same with a custom component: vs-input from vuesax.

Following the pattern below does not work as expected:

<template>
 <div>
 <vs-input type="text" v-model="value" @input="text_changed($event)" />
 <!-- <input type="text" :value="value" @input="$emit('input', $event.target.value)" /> -->
 </div>
</template>

<script>
export default 
 name: 'TestField',
 props: 
 value: 
 type: String,
 default: ''
 
 ,
 data() 
 return 
 ,
 methods: 
 text_changed(val) 
 console.log(val)
 // this.$emit('input', val)
 
 

</script>

In building custom components from other custom components is there anything particular we should look out for to get v-model binding working properly?

vue.js vue-component v-model

share|improve this question

asked Mar 25 at 15:44

Charles OkwuagwuCharles Okwuagwu

5,56088 gold badges5353 silver badges103103 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  In what way is it not behaving as expected?
  
  – Stephen Thomas
  Mar 25 at 17:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  with the regular input box, v-model binding works. In vs-input, i'm unable to get v-model binding to work, using the same code pattern
  
  – Charles Okwuagwu
  Mar 25 at 17:14
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Could you please tell me is following code working fine or not?
  
  – PALLAMOLLA SAI
  Mar 25 at 17:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @PALLAMOLLASAI no. gives errors Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "test"
  
  – Charles Okwuagwu
  Mar 25 at 17:39
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  could you please check this link once. stackoverflow.com/questions/51954716/…
  
  – PALLAMOLLA SAI
  Mar 25 at 17:44
  

  
  
  
  

 | 
show 2 more comments

0

I am able to build a simple textbox component from <input /> and setup v-model binding correctly.

I'm trying to do same with a custom component: vs-input from vuesax.

Following the pattern below does not work as expected:

<template>
 <div>
 <vs-input type="text" v-model="value" @input="text_changed($event)" />
 <!-- <input type="text" :value="value" @input="$emit('input', $event.target.value)" /> -->
 </div>
</template>

<script>
export default 
 name: 'TestField',
 props: 
 value: 
 type: String,
 default: ''
 
 ,
 data() 
 return 
 ,
 methods: 
 text_changed(val) 
 console.log(val)
 // this.$emit('input', val)
 
 

</script>

In building custom components from other custom components is there anything particular we should look out for to get v-model binding working properly?

vue.js vue-component v-model

share|improve this question

asked Mar 25 at 15:44

Charles OkwuagwuCharles Okwuagwu

5,56088 gold badges5353 silver badges103103 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  In what way is it not behaving as expected?
  
  – Stephen Thomas
  Mar 25 at 17:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  with the regular input box, v-model binding works. In vs-input, i'm unable to get v-model binding to work, using the same code pattern
  
  – Charles Okwuagwu
  Mar 25 at 17:14
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Could you please tell me is following code working fine or not?
  
  – PALLAMOLLA SAI
  Mar 25 at 17:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @PALLAMOLLASAI no. gives errors Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "test"
  
  – Charles Okwuagwu
  Mar 25 at 17:39
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  could you please check this link once. stackoverflow.com/questions/51954716/…
  
  – PALLAMOLLA SAI
  Mar 25 at 17:44
  

  
  
  
  

 | 
show 2 more comments

I am able to build a simple textbox component from <input /> and setup v-model binding correctly.

I'm trying to do same with a custom component: vs-input from vuesax.

Following the pattern below does not work as expected:

<template>
 <div>
 <vs-input type="text" v-model="value" @input="text_changed($event)" />
 <!-- <input type="text" :value="value" @input="$emit('input', $event.target.value)" /> -->
 </div>
</template>

<script>
export default 
 name: 'TestField',
 props: 
 value: 
 type: String,
 default: ''
 
 ,
 data() 
 return 
 ,
 methods: 
 text_changed(val) 
 console.log(val)
 // this.$emit('input', val)
 
 

</script>

In building custom components from other custom components is there anything particular we should look out for to get v-model binding working properly?

vue.js vue-component v-model

share|improve this question

asked Mar 25 at 15:44

Charles OkwuagwuCharles Okwuagwu

5,56088 gold badges5353 silver badges103103 bronze badges

<template>
 <div>
 <vs-input type="text" v-model="value" @input="text_changed($event)" />
 <!-- <input type="text" :value="value" @input="$emit('input', $event.target.value)" /> -->
 </div>
</template>

<script>
export default 
 name: 'TestField',
 props: 
 value: 
 type: String,
 default: ''
 
 ,
 data() 
 return 
 ,
 methods: 
 text_changed(val) 
 console.log(val)
 // this.$emit('input', val)
 
 

</script>

share|improve this question

asked Mar 25 at 15:44

Charles OkwuagwuCharles Okwuagwu

5,56088 gold badges5353 silver badges103103 bronze badges

share|improve this question

asked Mar 25 at 15:44

Charles OkwuagwuCharles Okwuagwu

5,56088 gold badges5353 silver badges103103 bronze badges

asked Mar 25 at 15:44

Charles OkwuagwuCharles Okwuagwu

5,56088 gold badges5353 silver badges103103 bronze badges

asked Mar 25 at 15:44

Charles OkwuagwuCharles Okwuagwu

5,56088 gold badges5353 silver badges103103 bronze badges

2 Answers
2

active

oldest

votes

1

Following code might help you.(Sample code try it in codepen)

updating props inside a child component

//html
<script src="https://unpkg.com/vue"></script>

<div id="app">
 <p> message </p>
 <input type="text" :value="test" @change="abc">
 test 
</div>

//VUE CODE

new Vue(
 el: '#app',
 data: 
 message: 'Hello Vue.js!',
 ,
 props:
 test:
 type:String,
 default:''
 
 ,
 methods:
 abc:function(event)
 //console.log("abc");
 console.log(event.target.value);
 this.test=event.target.value;
 
 
 )

share|improve this answer

edited Mar 26 at 4:07

answered Mar 25 at 17:25

PALLAMOLLA SAIPALLAMOLLA SAI

46222 silver badges77 bronze badges

add a comment | 

1

I prefer to interface props with computed:

<template>
 <div>
 <vs-input type="text" v-model="cValue" />
 </div>
</template>

<script>
export default 
 name: 'TestField',
 props: 
 value: 
 type: String,
 default: ''
 
 ,
 data() 
 return 
 ,
 computed: 
 cValue: 
 get: function()
 return this.value;
 ,
 set: function(val)

 // do w/e
 this.$emit('input', val)
 
 
 

</script>

Computed Setter

share|improve this answer

answered Mar 26 at 4:50

EstradiazEstradiaz

69411 silver badge1010 bronze badges

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%2f55341551%2fhow-to-enable-v-model-binding-when-building-a-custom-components-from-other-custo%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

Following code might help you.(Sample code try it in codepen)

updating props inside a child component

//html
<script src="https://unpkg.com/vue"></script>

<div id="app">
 <p> message </p>
 <input type="text" :value="test" @change="abc">
 test 
</div>

//VUE CODE

new Vue(
 el: '#app',
 data: 
 message: 'Hello Vue.js!',
 ,
 props:
 test:
 type:String,
 default:''
 
 ,
 methods:
 abc:function(event)
 //console.log("abc");
 console.log(event.target.value);
 this.test=event.target.value;
 
 
 )

share|improve this answer

edited Mar 26 at 4:07

answered Mar 25 at 17:25

PALLAMOLLA SAIPALLAMOLLA SAI

46222 silver badges77 bronze badges

add a comment | 

1

Following code might help you.(Sample code try it in codepen)

updating props inside a child component

//html
<script src="https://unpkg.com/vue"></script>

<div id="app">
 <p> message </p>
 <input type="text" :value="test" @change="abc">
 test 
</div>

//VUE CODE

new Vue(
 el: '#app',
 data: 
 message: 'Hello Vue.js!',
 ,
 props:
 test:
 type:String,
 default:''
 
 ,
 methods:
 abc:function(event)
 //console.log("abc");
 console.log(event.target.value);
 this.test=event.target.value;
 
 
 )

share|improve this answer

edited Mar 26 at 4:07

answered Mar 25 at 17:25

PALLAMOLLA SAIPALLAMOLLA SAI

46222 silver badges77 bronze badges

add a comment | 

Following code might help you.(Sample code try it in codepen)

updating props inside a child component

//html
<script src="https://unpkg.com/vue"></script>

<div id="app">
 <p> message </p>
 <input type="text" :value="test" @change="abc">
 test 
</div>

//VUE CODE

new Vue(
 el: '#app',
 data: 
 message: 'Hello Vue.js!',
 ,
 props:
 test:
 type:String,
 default:''
 
 ,
 methods:
 abc:function(event)
 //console.log("abc");
 console.log(event.target.value);
 this.test=event.target.value;
 
 
 )

share|improve this answer

edited Mar 26 at 4:07

answered Mar 25 at 17:25

PALLAMOLLA SAIPALLAMOLLA SAI

46222 silver badges77 bronze badges

//html
<script src="https://unpkg.com/vue"></script>

<div id="app">
 <p> message </p>
 <input type="text" :value="test" @change="abc">
 test 
</div>

//VUE CODE

new Vue(
 el: '#app',
 data: 
 message: 'Hello Vue.js!',
 ,
 props:
 test:
 type:String,
 default:''
 
 ,
 methods:
 abc:function(event)
 //console.log("abc");
 console.log(event.target.value);
 this.test=event.target.value;
 
 
 )

share|improve this answer

edited Mar 26 at 4:07

answered Mar 25 at 17:25

PALLAMOLLA SAIPALLAMOLLA SAI

46222 silver badges77 bronze badges

answered Mar 25 at 17:25

PALLAMOLLA SAIPALLAMOLLA SAI

46222 silver badges77 bronze badges

answered Mar 25 at 17:25

PALLAMOLLA SAIPALLAMOLLA SAI

46222 silver badges77 bronze badges

1

I prefer to interface props with computed:

<template>
 <div>
 <vs-input type="text" v-model="cValue" />
 </div>
</template>

<script>
export default 
 name: 'TestField',
 props: 
 value: 
 type: String,
 default: ''
 
 ,
 data() 
 return 
 ,
 computed: 
 cValue: 
 get: function()
 return this.value;
 ,
 set: function(val)

 // do w/e
 this.$emit('input', val)
 
 
 

</script>

Computed Setter

share|improve this answer

answered Mar 26 at 4:50

EstradiazEstradiaz

69411 silver badge1010 bronze badges

add a comment | 

1

I prefer to interface props with computed:

<template>
 <div>
 <vs-input type="text" v-model="cValue" />
 </div>
</template>

<script>
export default 
 name: 'TestField',
 props: 
 value: 
 type: String,
 default: ''
 
 ,
 data() 
 return 
 ,
 computed: 
 cValue: 
 get: function()
 return this.value;
 ,
 set: function(val)

 // do w/e
 this.$emit('input', val)
 
 
 

</script>

Computed Setter

share|improve this answer

answered Mar 26 at 4:50

EstradiazEstradiaz

69411 silver badge1010 bronze badges

add a comment | 

I prefer to interface props with computed:

<template>
 <div>
 <vs-input type="text" v-model="cValue" />
 </div>
</template>

<script>
export default 
 name: 'TestField',
 props: 
 value: 
 type: String,
 default: ''
 
 ,
 data() 
 return 
 ,
 computed: 
 cValue: 
 get: function()
 return this.value;
 ,
 set: function(val)

 // do w/e
 this.$emit('input', val)
 
 
 

</script>

Computed Setter

share|improve this answer

answered Mar 26 at 4:50

EstradiazEstradiaz

69411 silver badge1010 bronze badges

<template>
 <div>
 <vs-input type="text" v-model="cValue" />
 </div>
</template>

<script>
export default 
 name: 'TestField',
 props: 
 value: 
 type: String,
 default: ''
 
 ,
 data() 
 return 
 ,
 computed: 
 cValue: 
 get: function()
 return this.value;
 ,
 set: function(val)

 // do w/e
 this.$emit('input', val)
 
 
 

</script>

share|improve this answer

answered Mar 26 at 4:50

EstradiazEstradiaz

69411 silver badge1010 bronze badges

answered Mar 26 at 4:50

EstradiazEstradiaz

69411 silver badge1010 bronze badges

answered Mar 26 at 4:50

EstradiazEstradiaz

69411 silver badge1010 bronze badges