v-if --> 道具作为对象属性

Question

从我的父组件我做了这样的事情：

<example myID="abcd1234" label="Something important" />
<example myID="87poi" label="Just a label" />
<example myID="zxcvb" label="Extremely important" />
<example myID="bcd" label="No importance at all" />

下面是我的子组件：

<template>
  <div>
    <label :id="[myID]">{{ label }}</label>
    <input :id="[myID]" type="text" v-on:focusout="handleFocusOut"/>
    <div v-if="errors.myID">{{errors.myID}}</div> //this line does not work.
    // <div v-if="errors[myID]">{{errors.myID}}</div> //neither does this

  </div>
</template>

<script>
export default {
  name: 'example',
  data() { return { errors: {} } },
  props: { myID: String, label: String },
  methods: {
    handleFocusOut(e) {
      console.log('I am in onFocusOut')
      let myCurrentID = e.target.id
      this.errors[myCurrentID] = 'This is some text'
    }
  }
}
</script>

这一行<div v-if="errors.myID">不起作用。如何将道具值传递给错误对象？就像我写的那样。

请原谅糟糕的代码，因为我才刚接触 vue 2 周。

Answer 1

请看下面的片段：

Vue.component('example', {
  template: `
    <div>
      <label :for="myID">{{ label }}</label>
      <input :id="myID" type="text" @focusout="handleFocusOut"/>
      <div v-if="errors[myID]">{{ errors[myID] }}</div>
    </div>
  `,
  data() { return { errors: {} } },
  props: { myID: String, label: String },
  methods: {
    handleFocusOut() {
      console.log('I am in onFocusOut')
      this.errors = {[this.myID]: 'This is some text'}
    }
  }
})
new Vue({
  el: "#demo"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <example my-i-d="abcd1234" label="Something important"></example>
  <example my-i-d="87poi" label="Just a label"></example>
  <example my-i-d="zxcvb" label="Extremely important"></example>
  <example my-i-d="bcd" label="No importance at all"></example>
</div>

v-if --> 道具作为对象属性

v-if --> props as object property

javascript

vue.js

vuejs2

v-if --> 道具作为对象 属性

v-if --> props as object property

javascript

vue.js

vuejs2

v-if --> 道具作为对象属性