Question

我有2个表单字段标题和链接，当在标题中键入文本时，链接也会获得相同的值。 updateValue方法出了问题，这将执行两次。

我怎样才能实现两个领域都有自己的价值？

App.vue

<form-input v-on:input="handleTitle" :label="'title'" :labelvalue="'Titel'" :type="'text'" :placeholder="''" :name="'title'" :value="title" :classname="'form-control'" :id="''"></form-input>
<form-input v-on:input="handleLink" :label="'Link'" :labelvalue="'Link'" :type="'text'" :placeholder="''" :name="'link'" :value="title" :classname="'form-control'" :id="''"></form-input>

data() {
    return {
        title: '',
        link: '',
    }
}
methods: {
    handleTitle: function (evt) {
        this.title = evt.target.value
    },
    handleLink: function (evt) {
        this.link = evt.target.value
    },

模板：

 <input v-on:input="updateValue($event)" :type="type" :placeholder="placeholder" :name="name" :value="value" :class="classname" :id="id">

export default {
    props: {
        type: String,
        placeholder: String,
        name: String,
        value: String,
        classname: String,
        id: String,
        label: String,
        labelvalue: String
    },
    methods: {
        updateValue: function (evt) {
            console.log(this.$emit('input', evt))
            this.$emit('input', evt)
        }
    }
}

Answer 1

你的道具:value在<form-input :value="title">中将变量改为<form-input :value="link">

Vuejs更新字段更新所有字段

1 个答案: