web-dev-qa-db-ja.com

コンポーネントの非反応データをVue 2に設定するには？

私は、（作成されたフックで）1回ロードされるカテゴリ配列を持ち、それは常に静的です。この配列値をコンポーネントテンプレートでレンダリングします。

<template>
    <ul>
        <li v-for="item in myArray">{{ item }}</li>
    </ul>
</template>

私のデータプロパティは見えます（myArrayは含まれていません-リアクティブバインディングは必要ありません）：

data() {
    return {
        someReactiveData: [1, 2, 3]
    };
}

私の作成フック：

created() {
    // ...
    this.myArray = ["value 1", "value 2"];
    // ...
}

問題は、Vue throwエラー-myArrayをテンプレートで使用できません。DOMの作成時にこの変数が作成されないためです-マウントされています。

それでこれをどうやってやるの？または、コンポーネント定数をどこに保存できますか？

javascriptvue.jscomponentsvuejs2
19
Dave

Vueは、dataオプションのすべてのプロパティをセッター/ゲッターに設定して、それらをリアクティブにします。 反応性の深さ を参照してください

myArrayを静的にしたいので、 vm.$options を使用してアクセスできるカスタムオプションとして作成できます。

export default{
    data() {
        return{
            someReactiveData: [1, 2, 3]
        }
    },
    //custom option name myArray
    myArray: null,
    created() {
        //access the custom option using $options
        this.$options.myArray = ["value 1", "value 2"];
    }
}

次のように、テンプレートのこのカスタムオプションを反復処理できます。

<template>
    <ul>
        <li v-for="item in $options.myArray">{{ item }}</li>
    </ul>
</template>

これが fiddle です

21
Vamsi Krishna

実際、created()のthisにプロパティを設定することは、すぐに使えるはずです：

<template>
  <div id="app">
    <ul>
      <li v-for="item in myArray" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "app",
  created() {
    this.myArray = [
      'item 1',
      'item 2'
    ];
  }
};
</script>

レンダリングします

<div id="app">
  <ul>
    <li>
      item 1
    </li>
    <li>
      item 2
    </li>
  </ul>
</div>

ここのデモ： https://codesandbox.io/s/r0yqj2orpn .

11
BogdanL

私はこのような静的データ（非リアクティブ）を使用することを好みます：

  1. 次のコンテンツでミックスインを作成します（static_data.jsという名前を付けます）

    static_data.js

  2. 静的データを使用するコンポーネントでは、次のことができます。

ExampleComponent.vue

注：このコードの優れた点は、コメントのsamuelantonioli here です。

3
roli roli

dataに保存する場合、適切な方法は Object.freeze（） を使用することです。これは documentation で説明されています。

これの唯一の例外はObject.freeze（）の使用です。これは、既存のプロパティが変更されるのを防ぎます。これは、反応性システムが変更を追跡できないことも意味します。

2
rpadovani