Choose the First option Fpo, when you select the first item, the first object in the list is assigned to the variable test. I have used test.name as a model for that input field. Strangely, when I try to modify the input field, the select option also changes. How does this work? In Angular, I have never encountered this issue before. Is there any way to make sure that changing the input field does not affect the select box option?
new Vue({
el: '#app',
data: () => ({
items: [{name: 'Fpo', value:'foo'},{name:'bar', value:'bar'}],
test: {}
}),
methods: {
assignValue: function () {
this.test = this.items[0]
}
}
})<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-xl>
<v-layout wrap align-center>
<v-flex xs12 sm6 d-flex>
<v-select
:items="items"
label="Standard"
item-text="name"
item-value="value"
@change="assignValue"
></v-select>
</v-flex>
<v-flex>
<v-text-field v-model="test.name">
</v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>