arrays - 从外部 JSON 文件构建数组时 V-for 不工作

Question

Javascript：

// List of Products
const productsJSON = 'json/products.json';

// Component - Product Select
  app.component('product-select', {
    data() {
      return {
        selected: '',
        options: []
      }
    },
    template: `
      <p v-for="(option, index) in options">test</p>
      <div class="ui fluid labeled multiple search selection dropdown">
        <input type="hidden"
               name="products"
               v-model="selected"
               @change="selectProducts">
        <i class="dropdown icon"></i>
        <div class="default text">Select Products</div>

        <div class="menu">
          <div v-for="(option, index) in options"
               class="item"
               v-bind:data-value="option.name">
            {{ option.name }}
          </div>
        </div>
      </div>
    `,
    methods: {
      selectProducts(event) {
        this.selected = event.target.value.split(',');
        console.log(this.selected);
      }
    },
    beforeMount() {
      const jsonResults = [];
      this.options = jsonResults;

      $.getJSON(productsJSON, function (data) {
        jsonResults.push(...data);
      });
      console.log(jsonResults);
      console.log(this.options)
    }
  });

我只是试图用从函数options: []中的 JSON 文件返回的对象数组填充数组。$.getJSONJSON 文件如下所示：

[
  {
    "name": "White Gummy",
    "value": "White Gummy"
  },
  {
    "name": "Red Gummy",
    "value": "Red Gummy"
  },
  {
    "name": "Blue Gummy",
    "value": "Blue Gummy"
  }
]

我v-for的绝对没有返回，我的两个console.log函数的结果如下：

有没有人知道我做错了什么，或者是否有更好的方法来使用外部 .json 文件填充我的数组？

标签： arraysjsonlistvue.jsv-for

Answer 1

@Luckyfella 提供了一个解决方案，可以在下面的created()生命周期挂钩中找到：

// Component - Product Select
  app.component('product-select', {
    data() {
      return {
        selected: '',
        options: null
      }
    },
    template: `
      <div class="ui fluid labeled multiple search selection dropdown">
        <input type="hidden"
               name="products"
               v-model="selected"
               @change="selectProducts">
        <i class="dropdown icon"></i>
        <div class="default text">Select Products</div>

        <div class="menu">
          <div v-for="(option, index) in options"
               class="item"
               v-bind:data-value="option.name">
            {{ option.name }}
          </div>
        </div>
      </div>
    `,
    methods: {
      selectProducts(event) {
        this.selected = event.target.value.split(',');
        console.log(this.selected);
      }
    },
    created: function () {
      fetch(productsJSON)
        .then(r => r.json())
        .then(options => {
          this.options = options;
        });
    }
  });