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：无法读取未定义的属性'recipename'

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

一般来说，我需要得到：

recipename的一个副本，bottleID，瓶装，日期（因为这是配方的基础，在json中是相同的）但是一些NAME，滴（因为这些是成分，可能有几个）

SQL

Google Chrome Data

Answer 1

正如在按ID分组数组后的评论中所提到的，您可以迭代它并使用两个v-fors呈现您的数据：

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

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

请查看下面的演示或此fiddle。

＆＃13;

//
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
    }
  }
})

＆＃13;

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

＆＃13;

Vuejs嵌入式JSON

1 个答案: