computed property is not updating value in v-text-field after execution

Question

I am doing this excercise in vue.js 2.6. I have a toggled button that has two values: '1' or '2', and I made a computed that depending on these previous values return other values.

this returns either '1' or '2'

<v-col cols="12" sm="12" md="4" lg="4" xl="4">
    <label>Toggle button</label><br />
    <v-btn-toggle v-model="backendprop.prop1" color="blue" class="form-control p-0" dense borderless>
      <v-btn v-for="option in BackendProp1" :key="option.value" :value="option.value">{{ option.label }}</v-btn>
    </v-btn-toggle>
  </v-col>

I want the value of this input to update according to computed setValueBecauseToggledButton

  <v-col cols="12" sm="12" md="4" lg="4" xl="4">
    <label>Value depending on Toggled Button</label><br />
    <v-text-field
      v-model="backendprop.prop2"
      type="text"
      disabled
      outlined
      dense
      :value="setValueBecauseToggledButton"
    />
  </v-col>

and this is the computed value:

computed:{
    setValueBecauseToggledButton(){      
        return this.backendprop?.prop1?.toString() === '2' ? 'Valid prop' : ''

    }

The behavior I expect is when I choose between the options of one input the other input should be updated.

Placing console.log in setValueBecauseToggledButton shows me that is working perfectly, but it does nothing on the v-text-field.

Answer 1

You could set a watcher on your property and then update the value for the v-text-field inside it.

<v-col cols="12" sm="12" md="4" lg="4" xl="4">
  <label>Value depending on Toggled Button</label><br />
  <v-text-field
    v-model="backendprop.prop2"
    type="text"
    disabled
    outlined
    dense
  />
</v-col>

watch: {
    'backendprop.prop1'(value){
        this.backendprop.prop2 = value.toString() === '2' ? 'Valid prop' : ''
    }
}