I am currently utilizing vue js alongside buefy and have implemented two components: a field-radiobox component and a field-textarea component.
Within my post.cshtml page, I can choose an option from the radio buttons, and the selected value is appropriately displayed in the input box below within the respective component.
However, when I make edits inside the textbox of the field-textbox component, the previous selection from the field-radiobox component is completely erased. The input box below the radio buttons also no longer shows anything, indicating that the v-model in that particular component was reset or disrupted while typing in the textbox.
Interestingly, this issue only seems to occur with a textbox element. If I were to employ an input element instead of a textbox, the problem does not manifest.
Why is it that the v-model of one component is interfering with the v-model of another component?
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>