一个组件中的 v-model 干扰另一个组件的 v-model

Question

我正在使用带有 buefy 的 vue js，我有两个组件。即field-radiobox组件和field-textarea组件。

在我的post.cshtml 页面中，我可以从单选按钮中进行选择，并且所选值会在组件下方的输入框中正确显示。

但是，当我从 field-textbox 组件编辑文本框内的内容时，我之前从 field-radiobox 组件按钮中的选择被完全删除，单选按钮下方的输入框也不再显示任何内容，这意味着在我输入文本框时，该组件中的 v-model 被重置或受到干扰。

这似乎只发生在文本框标签上。如果我尝试使用输入元素而不是文本框，问题似乎不会发生。

为什么我的一个组件的 v-model 会干扰另一个组件的 v-model？

post.cshtml

<div>
<form data-toggle="formcache" class="form rounded justify-content-center" id="form" asp-route-returnUrl="@ViewData["ReturnUrl"]" method="post" v-cloak>
    <div asp-validation-summary="All" class="text-danger"></div>

    <!--Select Advert type-->
    <field-radiobox 
        asp-property="TypeId"
        title="I want to" 
        :options="advertTypes" 
        value-key="id" 
        label-key="name"></field-radiobox>

    <!--TERMS-->
    <field-textarea asp-property="Terms" title="Terms"></field-textarea>
</form>
</div>
<script>
        var vm = new Vue({
            el: '#form',
            data:
            {
                loaded: false,
                advertTypes: @Html.Raw(Json.Serialize(Model.AdvertTypes))
            }
        });
</script>

field-radiobox.vue

<template>
    <!-- https://buefy.github.io/#/documentation/dropdown -->
    <div>
    <b-field :label="title" horizontal>
        <b-radio-button v-model="selectedValue"
                        v-for="option in options"
                        :native-value="getValue(option)" expanded>
            {{ getLabel(option) }}
        </b-radio-button>
    </b-field>
        <input :asp-for="aspProperty" v-model="selectedValue"/>
    </div>
</template>

<script>
    export default {
        name: "field-radiobox",
        data: function() {
            return {
                selectedValue: this.selectedValue
            }
        },
        props: {
            title: {
                type: String,
                required: true
            },
            options:{
                type:Array,
                required:true
            },
            valueKey:{
                type:String,
                required:true
            },
            labelKey:{
                type:String,
                required:true
            },
            selectedValue: {
                required:false
            },
            aspProperty:{
                type:String,
                required:false
            }
        },
        methods: {
            getLabel(obj) {
                //return this.labelKey;
                return !this.labelKey ? obj : obj[this.labelKey]
            },
            getValue(obj) {
                return !this.valueKey ? obj : obj[this.valueKey]
            }
        }
    }
</script>

field-text.vue

<template>
    <!-- https://buefy.github.io/#/documentation/dropdown -->
    <div>
        <b-field :label="title" horizontal>
            <textarea :class="inputClass" :readonly="readOnly"
                      :placeholder="placeholder" v-model="inputValue"></textarea>
        </b-field>
            <input :asp-for="aspProperty" v-model="inputValue"/>
    </div>
</template>

<script>
    export default {
        name: "field-textarea",
        data: function () {
            return {
                inputValue: this.inputValue
            }
        },
        props: {
            title: {
                type: String,
                required: true
            },
            inputClass: {
                type: String,
                required: false,
                default: "textarea"
            },
            placeholder: {
                type: String,
                required: false
            },
            readOnly: {
                type: Boolean,
                required: false,
                default: false
            },
            inputValue: {
                type: String,
                required: false,
                default: ""
            },
            aspProperty:{
                type:String,
                required:false
            }
        },
        methods: {
            getLabel(obj) {
                //return this.labelKey;
                return !this.labelKey ? obj : obj[this.labelKey]
            },
            getValue(obj) {
                return !this.valueKey ? obj : obj[this.valueKey]
            }
        }
    }
</script>

<style scoped>

</style>

Answer 1

您将 data 项目命名为与 prop 项目相同。当它们被提升为顶级项目时，prop 是可见的。绑定$data.inputValue 或（更好）不要将它们命名为相同的东西。

（我认为您会收到有关修改道具的警告。）