Vue.js 更新的屬性在子組件上沒有改變

Question

我有一個子組件，它是一個 HTML 輸入元素。 它看起來像這樣：

<label-input inputId="formProductId"
             inputType="number"
             inputName="productId"
             :inputEnabled="filters.productId.options"
             :label="translations['product_id']"
             :placeholder="translations['product_id']"
             :data="filters.productId.value"
/>

LabelInput.vue 文件：

<template>
    <div class="form-element">
        <label :for="inputId" :class="['form-element-title', { 'js-focused': focused }]">{{ label }}</label>
        <input @input="updateValue($event.target.value)" :type="inputType" :id="inputId" :name="inputEnabled ? inputName : false" v-model="inputData" :placeholder="placeholder" @focus="focused = true" @blur="focused = false">
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class LabelInput extends Vue {
    @Prop({ default: () => '' }) inputId!: string
    @Prop({ default: () => '' }) inputType!: string
    @Prop({ default: () => '' }) inputName!: string
    @Prop({ default: () => '' }) label!: string
    @Prop({ default: () => '' }) placeholder!: string
    @Prop({ default: () => {} }) data!: []
    @Prop({ default: () => true }) inputEnabled!: string

    private inputData = this.data
    private focused = false

    updateValue (value: string) {
        this.$root.$emit('input', {'inputName' : this.inputName, 'inputValue' : value});
    }
}

因此 model 作為數據通過 filters.productId.value 傳遞，然后更改為局部變量 inputData。

現在，如果我更改輸入值，我將使用 updateValue function 發出輸入名稱並將其值返回到父組件，從而更新原始的 filters.productId.value 值。 這很好用。

現在的問題是我的父組件上有一個 function，它將 filters.productId.value 值重置回 null。它看起來像這樣：

clearFilters() {
    for (const [key, value] of Object.entries(this.filters)) {
        this.filters[key].value = null;
    }
}

現在我的子組件 LabelInput 中的數據沒有改變，即使 filters.productId.value 現在是 null。 如何刷新子組件？

Answer 1

我還沒有將 Vue 作為 class 組件使用，但問題似乎是將 prop 設置為 class 中的屬性。

private inputData = this.data

Vue 監聽 prop 的變化，但 data 不監聽引用的變化，所以 prop 變了，但inputData沒有變，因為 Vue 沒有為它設置監聽器。

當我想做與您類似的事情時，不用類工作，我使用computed屬性。 檢查文檔以了解它是如何實現的。

使用計算屬性。

get inputData() {
  return this.data;
}

我相信這會如您所願。

為了更好地可視化我們在評論中所說的內容，下面是沒有 v-model 的代碼應該是什么樣子。

輸入：

<input :value="inputData" @input="updateValue($event.target.value)" :type="inputType" :id="inputId" :name="inputEnabled ? inputName : false" :placeholder="placeholder" @focus="focused = true" @blur="focused = false">

吸氣劑：

get inputData() {
  // you can change your prop here and return a new value. 
  // A lower or upper case, for example. Just don't change the prop, only use it.
  return this.data;
}

更新值：

updateValue(value) {
  this.$root.$emit('input', {'inputName' : this.inputName, 'inputValue' : value});
    }
}

另外，我認為不需要使用$root ，因為您可以在組件中使用$emit 。 對於非 class 組件，您可以通過this.$emit訪問它，我相信這里應該是一樣的。

您可以做的另一個更改是監聽 html 中的事件：

<label-input inputId="formProductId"
             inputType="number"
             inputName="productId"
             :inputEnabled="filters.productId.options"
             :label="translations['product_id']"
             :placeholder="translations['product_id']"
             :data="filters.productId.value"
             @updateValue="doSomething"

/>

您可以聲明一個名為doSomething的方法，該方法將接收到的值作為第一個參數，或者簡單地將變量設置為事件接收到的值@updateValue="(value) => {filters.productId.value = value}" 。 這也會起作用。