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

Posted 2023-02-22

【中文标题】从外部 JSON 文件构建数组时 V-for 不工作

【英文标题】：V-for not working when building array from external JSON file

【发布时间】：2021-06-06 20:05:11

【问题描述】：

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)
    
  );

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

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

我的v-for 没有返回任何内容，我的两个console.log 函数的结果如下：

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

【问题讨论】：

当 jsonResults 为空时，您将 jsonResults 分配给 this.options。我猜你应该在从文件中获取实际数据后这样做。

@Luckyfella 这就是我知道我已经看这个太久了。我进行了更改，看起来更好，但是 v-for 仍然是空的，就像在渲染组件后正在填充数组一样，即使它全部在 beforeMount()

这篇文章可能会有所帮助：***.com/questions/35770681/…

效果很好。谢谢@Luckyfella

使用vue.js devtools extension 可以准确地告诉您组件数据中的内容。如果您出于某种原因不想使用它，您可以通过在模板<div> options.length </div> 的任何位置添加 html 元素来检查模板中是否包含任何元素，我注意到您没有为循环

【参考方案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;
        );
    
  );