Question

我将sup组件中的json发送到子组件但是当我尝试像voca [1]那样使用它时，它在子组件中是不可能的。

json就像这样

voca: [{"e" :"happy", "k": "행복"},{"e" :"happy", "k": "행복"}, ...]

我将它发送到子组件以使用道具。

<script>
import sub1 from './components/sub1.vue'
import sub2 from './components/sub2.vue'

export default {
  components: {
    'sub1': sub1,
    'sub2': sub2
  },
  data() {
    return {
      message: '',
      voca: [
        {"e" :"happy", "k": "행복"},
        {"e" :"happy", "k": "행복"},
        {"e" :"happy", "k": "행복"}
        ]
    }
  },
  computed: {
       
      }    
  }
}
</script>

<template>
  <div id="app">
    <sub1 v-bind:propsdata="voca"></sub1>
    <sub2></sub2>
  </div>
</template>

这是子组件的代码snipet

<script>
export default {
    props: ['propsdata'],
    data() {
      return {
          obj: propsdata
      }  
    },
    computed: {
        
    }
}
</script>

<template>
    <div>
        sub
        <p>{{obj[0].english}}</p>
    </div>
</template>

像我说的那样obj [0] .english不起作用错误在这里

[Vue warn]: Error in render: "TypeError: Cannot read property 'english' of undefined"

当我从子组件中的道具获取数据时，如何使用voca [0] .english？

Answer 1

您正在尝试读取不存在的对象属性，这就是 TypeError

的原因

{{obj[0].english}} //english does not exist in your array of objects

请查看此sandbox example。

关于Vue.js道具，你是通过 v-bind 正确地做的，在我提供给你的例子中，我使用了冒号后面跟着子组件的属性名的简写语法需要通过道具，即：

<YourAwesomeComponent :myPropName="SomeData" />

请查看official documentation获取有关Vue.js道具的更多详细信息。

将json传递给其他vue组件

1 个答案: