Как обновить значение массива вложенных объектов напрямую по v-модели в VUE?

Question

Мне нужно обновить значение в JSON через v-модель

{ class: "data.child",
    "myform.input1": [true, "<input1 value>"]
}

<input type="text" v-model="<what to put here?>" > //so that directly value can be update in my vue data property JSON mentioned above

Answer 1

Не могу сделать это напрямую с v-моделью, если только вы не хотите изменить тип входа на несколько вариантов выбора. Если вы действительно хотите точный вывод, можете прослушать событие onchange, как показано ниже. Или можете просто использовать v-модель и вводить свои данные по своему усмотрению ... но нужно будет преобразовать в массив.

const jsonData = { class: "data.child",
    "myform.input1": [true, "<input1 value>"],
    "myform.input2": [true, "<input1 value>"]
}


const App = {
template: `<div>
<input type="text" v-model="data['myform.input2']"/>
<input type="text" @change="update"/>
<p>{{JSON.stringify(data, null, 2)}}</p>
</div>`,
methods: {
update: function(event) {
this.data['myform.input1'] = [true, event.target.value];
}
}
,
data(){
return {data: jsonData}
}
}

new Vue({
render: h => h(App),
}).$mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
</div>