javascript - 如何从一堆计算值中一个一个地分配一个 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 对象，其中包含数据中每个值的数组。因此，创建一个啤酒厂对象数组并将其推送到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 函数并使用 native fetch相反
• 你可以直接在for循环中使用j并用4递增
• How do I create a runnable stack snippet?