Vuejs 嵌入式 JSON

Question

告诉我如何从嵌入的 json 中提取数据。 Vuejs 中的数据是从数据库中传输过来的。 Google Chrome 的调试器中有数据。数据库中存在一对多关系。一种配方，多种成分

示例 Vue

  var vm =  new Vue({
        el: '#my_view',
        data: {
            recipeslist: [],
            recipes: {}
        },
        created: function () {
            this.$http.get('/recipe').then(function (data) {         
                this.$set(this, 'recipeslist', data.body.items)
                $( "#recipe_view" ).hide();
            })
        },
        methods: {
            showrecipe: function (event) {
                this.$http.get('/recipe/'+event.target.id).then(function (data) {                   
                    this.$set(this, 'recipes', data.body.items)               
                    $( "#recipe_view" ).show();
                    $( "#main_view" ).hide();


                })                
            }
        }
    })

示例 html

<div class="root"v-for="index in recipes">
  <h6> {{index.recipename}} </h6>
  <h6> {{index.flavorid}} </h6>
</div>

HTML 视图

test 1

3

test 1

4

使用此代码的示例数据

<div class="root"v-for="index in recipes">
  <h6> {{index}} </h6>
</div>

{ "id": 1, "bottleID": 1, "recipename": "test 1", "bottlesize": 60, "date": 1, "flavorslist": 1, "note": "none", "flavorid": 3, "NAME": "tpa lime", "drops": 5, "recepeid": 1 }

{ "id": 1, "bottleID": 1, "recipename": "test 1", "bottlesize": 60, "date": 1, "flavorslist": 1, "note": "none", "flavorid": 4, "NAME": "tpa prome", "drops": 1, "recepeid": 1 }

试过所以写了一个错误：vue.min.js:6 TypeError: Cannot read property 'recipename' of undefined

   <div class="root"v-for="index in recipes">
             <h6> {{index[0].recipename}} </h6>
             <h6> {{index[0].flavorid}} </h6>
  </div>

一般来说，我需要得到：

一份recipename、bottleID、bottlesize、date（因为这是recipe的基础，在json中也是一样的）但是一些NAME，drops（因为这些是成分，可能有几个）

SQL

Google Chrome Data

Answer 1

如 cmets 中所述，在按 id 对数组进行分组后，您可以遍历它并使用两个 v-fors 呈现您的数据：

• 获取组的第一个循环
• 第二个循环渲染成分

Lodash 不是必需的。但它简化了您的代码，并且经过更好的测试，然后自行编码。无论如何，我添加了一个基本的分组方法来进行分组。如果它是您的应用程序中唯一需要 lodash 的部分，我会使用自己的分组方法。

请看下面的演示或fiddle。

//
const jsonData = [{
    "id": 1,
    "bottleID": 1,
    "recipename": "test 1",
    "bottlesize": 60,
    "date": 1,
    "flavorslist": 1,
    "note": "none",
    "flavorid": 3,
    "NAME": "tpa lime",
    "drops": 5,
    "recepeid": 1
  },

  {
    "id": 1,
    "bottleID": 1,
    "recipename": "test 1",
    "bottlesize": 60,
    "date": 1,
    "flavorslist": 1,
    "note": "none",
    "flavorid": 4,
    "NAME": "tpa prome",
    "drops": 1,
    "recepeid": 1
  }
]

new Vue({
  el: '#app',
  data() {
    let groupedJson = this.groupBy(jsonData, (obj) => obj.id) // _.groupBy(jsonData, (obj) => obj.id)
    console.log('grouped by id', JSON.parse(JSON.stringify(groupedJson)))
    return {
      json: groupedJson
    }
  },
  methods: {
    groupBy(data, iterator) {
      let result = {}
      for (let i = 0; i < data.length; i++) {
        let id = iterator(data[i])
        if (!result[id]) result[id] = []
        result[id].push(Object.assign({}, data[i]))
      }
      return result
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app" v-cloak>
  <p>Original data</p>
  <ul>
    <li v-for="(recipes, id) in json">
      {{json[id][0].recipename}}
      <ul>
        <li v-for="recipe in recipes">
          {{recipe.NAME}} - {{recipe.drops}}
        </li>
      </ul>
    </li>
  </ul>
</div>
<div>
  <p>It should be</p>
  <ul>
    <li>test 1</li>
    <li> tpa lime - 5</li>
    <li>tpa prome - 1</li>
  </ul>
</div>