如何从一堆计算值中一个一个地分配 Vue 对象的属性？

Question

我正在尝试从一些混乱的 JSON 构建一堆 Vue 对象。我可以为每种类型的属性创建一个干净的数组，但我不知道如何获取这些数组并将它们映射到 Vue 对象。

试图坚持使用 ES6。 jsfiddle：https://jsfiddle.net/rachidmrad/rfuLxgpz/1/

HTML

<div class="card w-50" v-for="brewery in breweries">
 <div class="card-body">
  <h5 class="card-title">Brewery: {{ brewery.name }}</h5>
   <p class="card-text">
    Location: {{ brewery.location }}<br />
    Specialities: {{ brewery.speciality }}<br />
    Tier: {{ brewery.tier }}
   </p>
  </div>
</div>

JS

data() {
  return {
    breweries:
      {
        name: [],
        location: [],
        speciality: [],
        tier: []
      }
  }
},

mounted() {
  let thisBrewery = this.name,
      thisLocation = this.location,
      thisSpeciality = this.speciality,
      thisTier = this.tier;

// Get values from JSON - pretty sure I go this part right
  get('https://spreadsheets.google.com/feeds/cells/1CTlh5HuhQd44_bTuQF_X02QzJpa0ReQJB5jb8MSFvO8/od6/public/values?alt=json')
    .then((data) => {
      let json = JSON.parse(data);
      maxEntry = json.feed.entry.length /4 - 1;
      for (let i = 0; i < maxEntry; i++) {
          thisBrewery[i] = json.feed.entry[j].content.$t;
          thisLocation[i] = json.feed.entry[j + 1].content.$t;
          thisSpeciality[i] = json.feed.entry[j + 2].content.$t;
          thisTier[i] = json.feed.entry[j + 3].content.$t;
          j = j + 4;
      }
    })
    .catch((err) => {
      console.log('oops');
  });
}

我基本上需要将 thisBrewery 映射到 breweries.name，thisLocation 映射到 breweries.location 等。

我不相信 JSON 在这里是相关的（我在非 Vue 应用程序中测试了我正在计算的数组并且他们检查了）但可以随意美化并查看数据：https://spreadsheets.google.com/feeds/cells/1CTlh5HuhQd44_bTuQF_X02QzJpa0ReQJB5jb8MSFvO8/od6/public/values?alt=json（这是Google 表格 JSON）

Answer 1

您的 HTML 建议您期待一组 brewery 对象，其中每个对象包含 name、location 属性等。但是，您有一个 breweries 对象，其中每个对象的数据值都有一个数组。因此，创建一个啤酒厂对象数组并将push 发送到breweries。

let app = new Vue({
  el: '#app',
  data() {
    return {
      breweries: []
    }
  },
  mounted() {
    fetch('https://spreadsheets.google.com/feeds/cells/1CTlh5HuhQd44_bTuQF_X02QzJpa0ReQJB5jb8MSFvO8/od6/public/values?alt=json')
      .then(data => data.json())
      .then(json => {
        for (let j = 4; j < json.feed.entry.length; j += 4) {
          const name = json.feed.entry[j].content.$t,
            location = json.feed.entry[j + 1].content.$t,
            speciality = json.feed.entry[j + 2].content.$t,
            tier = json.feed.entry[j + 3].content.$t;

          // push an object to the array
          this.breweries.push({ name, location, speciality, tier });
        }
      })
      .catch((err) => {
        console.log('oops');
      });
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container-fluid" id="app">
  <div class="card-columns">
    <div class="card w-50" v-for="brewery in breweries">
      <div class="card-body">
        <h5 class="card-title">Brewery: {{ brewery.name }}</h5>
        <p class="card-text">
          Location: {{ brewery.location }}<br /> Specialities: {{ brewery.speciality }}<br /> Tier: {{ brewery.tier }}
        </p>
      </div>
    </div>
  </div>
</div>

注意：

• 使用您的旧结构，您可以使用v-for="(name, index) in breweries.name" 并使用index 来获取其他属性，例如{{ breweries.location[index] }}
• let thisBrewery = this.name 应该是 this.breweries.name
• 您可以跳过 get 函数并使用本机 fetch 代替
• 您可以在for 循环中直接使用j 并使用4 递增它
• How do I create a runnable stack snippet?