美文网首页
vue v-for下的ref失效

vue v-for下的ref失效

作者: 忘记_3a6a | 来源:发表于2020-04-15 16:47 被阅读0次
  • 父控件
<template>
  <div>
    <el-form label-width="100px">
      <el-row>
        <el-col
          v-for="(control,index ,key) in controlInfo"
          :key="key"
          :index="index"
          :item="control"
          :span="control.row"
        >
          <InputText ref="title" ></InputText>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
      </el-form-item>
    </el-form>
 
  </div>
</template>
<script>
import InputText from "@/components/InputText.vue";
export default {
  methods: {
    submitForm() {
      console.log("contentInfo:", this.contentInfo);
      this.$nextTick(() => {
          this.$refs.title[0].say();
          this.$refs.title[1].say();
          this.$refs.title[2].say();
      });
    },
  },
  components: { InputText},

  }
};
</script>


  • 子控件
<template>
    <h1>hi</h1>
</template>
<script>
export default {
    methods:{
        say(){
            console.log("-----------");
        }
    }
}
</script>

相关文章

网友评论

      本文标题:vue v-for下的ref失效

      本文链接:https://www.haomeiwen.com/subject/jzncvhtx.html