Javascript 一个组件中的v型干扰另一个组件的v型

我将vue js与buefy一起使用，我有两个组件。即field radiobox组件和field textarea组件

在我的post.cshtml页面中，我可以从单选按钮中进行选择，并且所选的值将在组件内的下面的输入框中适当地显示

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

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

为什么一个组件的v型会干扰另一个组件的v型

post.cshtml

field-radiobox.vue

field-text.vue

将数据项命名为与道具项相同的名称。当它们被提升到实例项的顶部时，该道具可见。Bind$data.inputValue或更高版本不要将它们命名为相同的名称

---

我想你会收到关于修改道具的警告。

我已经按照建议进行了更改，效果很好！但是，当从组件发出值时，同样的问题再次出现。我听从了你的建议，对每一个都进行了唯一的命名，但当我更改一个输入值时，它也会重置它，所以你可能需要用更新的代码问一个新问题。

<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>

<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>

<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>