Question

我是vuejs的新手，因此被这个问题困扰。链接到代码： https://jsfiddle.net/cdq8xu9t/

Js

override fun onCleared() {
        super.onCleared()
        //finish the coroutines opened jobs
        listing.clearCoroutineJobs.invoke()
    }

HTML

Vue.component('jk',{
    props:['value'],
template:`
    <div v-for="val in value">
        <input type="text" v-bind:value="val.a" v-on:input="$emit('input',$event.target.value)">
        <input type="text" v-bind:value="val.b" v-on:input="$emit('input',$event.target.value)">
    </div>
`
});

new Vue({
el: '#app',
data: {
    message: 'Hello Vue.js!',
    add:[{
        a:'apple',
    b:'orange'
    }]
}
})

问题如下。组件已生成，但是当我更改值时，出现了问题。

我在chrome中使用了vue-js插件，发现当我更改输入字段中的值时，添加对象变为字符串。任何人都可以提出修复建议。拜托。

Answer 1

您在传递道具时犯了一个错误。

<div id="app">
  <p>{{ message }}</p>
  <jk :value="add"></jk>
</div>

使用key时，您需要为每个项目添加不定v-for。

    <div
      v-for="val in value"
      :key="val.id" // recommended :)
    >
        <input type="text" v-bind:value="val.a" v-on:input="$emit('input',$event.target.value)">
        <input type="text" v-bind:value="val.b" v-on:input="$emit('input',$event.target.value)">
    </div>

有时开发人员将index用作key，但不建议这样做。

    <div
      v-for="(val, index) in value"
      :key="index" // not recommended :(
    >

这里是完整的code。

将v-model作为数组传递给组件时，Vue js出现问题？

1 个答案: