web-dev-qa-db-ja.com

データプロパティをVuexゲッターから返された値に設定する方法

Vueコンポーネントがあり、ユーザーが前のコンポーネントで以前にクリックした内容に応じてデータを表示します。ユーザーが最初にクリックしたときに、「現在の」インデックスを設定します。次に、次のページには、データ配列を調べて「現在の」データを返すゲッターがあります。

リダイレクト先のコンポーネントは、編集可能なフォームです。 「現在の」データを事前入力できるようにしたいと思います。プレースホルダーとしてではなく、実際の値として、直接編集できるようにします。

問題は、ゲッターから返された値をデータ関数の値に設定して、v-modelでバインドできるようにする方法がわからないことです。

HTML

<input type="text" class="form-control" id="nickname1" v-model="name" name="name">
<input type="text" class="form-control" id="address1" placeholder="" v-model="address" name="address" > 
<input type="text" class="form-control" id="city1" placeholder="" v-model="city" name="city" >

VUE

data: function() {
    return {
        name: this.currentArea.title,
        address: this.currentArea.address,
        city: this.currentArea.city,
        state: this.currentArea.state
    }
},
computed: {
    currentArea() { return this.$store.getters.currentArea }
}

* this.currentArea.titleおよびcurrentArea.titleは機能しません。

*プレースホルダーをバインドすると、データが正しく表示されるため、getter関数はcurrentAreaを正しく返します。

data-bindingvue.jsvuex
5
Linx

dataメソッドは、初期化中に1回だけ起動されます。前計算されたプロパティが設定されます。したがって、currentAreaメソッド内からdataを参照すると、実行時にundefinedになるため、機能しません。

this.$store.getters.currentAreaがこのコンポーネントの存続期間中に変更されることが予想されない場合は、mountedフックでデータプロパティを1回設定するのが最も簡単です。

data() {
  return {
    name: '',
    address: '',
    city: '',
    state: ''
  }
},
mounted() {
  let area = this.$store.getters.currentArea;
  this.name = area.name;
  this.address = area.address;
  this.city = area.city;
  this.state = area.state;       
}

または、このコンポーネントのデータプロパティが常にcurrentAreaと同じであることがわかっている場合は、dataメソッドでthis.$store.getters.currentAreaを直接返すことができます。

data() {
  return this.$store.getters.currentArea;
}
7
thanksd

@thanksd：ご回答ありがとうございます。状態がvuexに保存され、一時的に不完全な状態でコンポーネントに送信され、フェッチによって更新されるシナリオに取り組んでいます。また、フォームで編集できる必要があります。

私の解決策は、vuexのゲッターで州の一部をエクスポートすることでした。

getters: {
  getItemDetail: (state, getters) => (id) => {
    let item = state.openedItems.items.find(i => i.id === id);
    return item ? item.data : null;
  }
}

データ、計算されたプロパティ、および監視プロパティを組み合わせてコンポーネントで使用する（そして、lodashを使用してオブジェクトを複製する）：

data () {
  return {
    itemDetail: null
  };
},
computed: {
  itemData () {
    return this.$store.getters.getItemDetail(this.item.id);
  }
},
watch: {
  itemData (n, o) {
    this.itemDetail = _.cloneDeep(n);
  }
}

最後に、入力を「itemDetail」にバインドします（私の例では、要素スイッチを使用します）。

<el-switch v-model="itemDetail.property"></el-switch>

私には（しかし、私はVueにまったく慣れていません）、それは良い妥協案のように思えます。

1
Matteo Piazza