Vue 使用嵌套组件进行双向数据绑定 [英] VueTwo Way Data Binding with Nested Components

查看：21
本文介绍了Vue 使用嵌套组件进行双向数据绑定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

假设我想显示一个问题列表.对于每个问题，都有一个答案列表，没有对错.对于每个问题，用户可以选择一个答案.我想知道如何在所选答案上创建双向绑定.

Vue:

新的Vue({el: "#app",数据:{问题: [{}]}}

示例问题模型:

<代码>{编号:1，name: "你最喜欢哪种颜色?",selectedAnswerId:空，selectedAnswerName:空，答案:[{id: 1, name: red, photoUrl: ".../red", selected: false},{id: 2, name: green, photoUrl: ".../green", selected: false},{id: 3, name: blue, photoUrl: ".../blue", selected: false},]}

组件:

var myAnswer ={道具: ["id", "name", "url", "selected"],模板:`<div class="answer" v-bind:class="{selected: selected}"><img class="answer-photo" v-bind:src="url"><div class="answer-name">{{name}}</div>

`};Vue.component("我的问题",{道具: ["id", "name", "answers"],成分:{我的答案":我的答案},模板:`<div class="问题"><div class="question-name">{{name}}</div><div class="问题-答案"><my-answer v-for="answer in answers" v-bind:id="answer.id" v-bind:name="answer.name" v-bind:url="answer.photoUrl" v-bind:selected="answer.selected"></my-answer>

`});

当用户通过单击 div 选择问题的答案时，我希望 Question 模型的 selectedAnswerId/selectedAnswerName 以及相应的答案 selected 属性进行设置.因此，为了完成这种双向绑定，我需要在我的组件中添加什么?我相信它需要输入元素和 v-model，但我无法弄清楚.另外，我只接触了 Vue.js 一天，并没有使用相关框架的经验.因此，如果我在做任何明显错误或违反最佳实践的事情，那也很高兴知道.提前致谢！

解决方案

答案将处理点击事件并发出(自定义)selected-answer 事件.问题将有自己的数据项来存储选择的答案 ID；答案组件的 selected 道具将基于此.问题将通过设置其 selectedId 来处理 selected-answer 事件.

var myAnswer = {道具: ["id", "name", "url", "selected"],模板:`<div class="answer" v-bind:class="{selected: selected}"@click="setSelection()"><div class="answer-name">{{name}}</div>

`，方法: {设置选择(){this.$emit('selected-answer', this.id);}}};Vue.component("我的问题", {道具: ["id", "name", "answers"],数据() {返回 {selectedId:空};},成分: {我的答案":我的答案},模板:`<div class="问题"><div class="question-name">{{name}}</div><div class="问题-答案"><my-answer v-for="答案中的答案":id="answer.id" :name="answer.name" :url="answer.photoUrl":selected="answer.id === selectedId" @selected-answer="selectAnswer"></my-answer>

`，方法: {selectAnswer(answerId) {this.selectedId = answerId;}}});新的 Vue({el: '#app',数据: {问题: [{编号:1，name: "你最喜欢哪种颜色?",答案:[{编号:1，name: '红色',照片网址:.../红色"},{编号:2，name: '绿色',照片网址:.../绿色"},{编号:3，name: '蓝色',照片网址:.../蓝色"},]}]}});

.answer {光标:指针；}.selected {背景色:#f0f0f0；}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script><div id="应用程序"><my-question v-for="q in questions" :name="q.name" :answers="q.answers"></my-question>

Suppose I want to display a List of Questions. For each question, there is a list of answers, none of which are right or wrong. For each question, the user can choose an answer. I'm wondering how to create two-way binding on the selected answer.

The Vue:

new Vue(
{
    el: "#app",

    data:
    {
        questions: [{}]
    }
}

Example Question Model:

{
    id: 1,
    name: "Which color is your favorite?",
    selectedAnswerId: null,
    selectedAnswerName: null,
    answers:
    [
        {id: 1, name: red, photoUrl: ".../red", selected: false},
        {id: 2, name: green, photoUrl: ".../green", selected: false},
        {id: 3, name: blue, photoUrl: ".../blue", selected: false},
    ]
}

Components:

var myAnswer =
{
    props: ["id", "name", "url", "selected"],
    template:
    `
        <div class="answer" v-bind:class="{selected: selected}">
            <img class="answer-photo" v-bind:src="url">
            <div class="answer-name">{{name}}</div>
        </div>
    `
};

Vue.component("my-question",
{
    props: ["id", "name", "answers"],
    components:
    {
        "my-answer": myAnswer
    },
    template:
    `
        <div class ="question">
            <div class="question-name">{{name}}</div>
            <div class="question-answers">
                <my-answer v-for="answer in answers" v-bind:id="answer.id" v-bind:name="answer.name" v-bind:url="answer.photoUrl" v-bind:selected="answer.selected"></my-answer>
            </div>
        </div>
    `
});

When the user selects an answer to a question by clicking on the div, I want the Question model's selectedAnswerId/selectedAnswerName along with the answers selected property to be set accordingly. Therefore, what do I need to add to my components in order to accomplish this two-way binding? I believe it requires input elements and v-model, but I couldn't quite figure it out. Also, I am only one day into Vue.js and have no experience with related frameworks. So if I am doing anything blatantly wrong or against best practice, that would be good to know as well. Thanks in advance!

解决方案

The answer will handle a click event and emit a (custom) selected-answer event. The question will have its own data item to store the selected answer ID; the answer component's selected prop will be based on that. The question will handle the selected-answer event by setting its selectedId.

var myAnswer = {
  props: ["id", "name", "url", "selected"],
  template: `
        <div class="answer" v-bind:class="{selected: selected}"
         @click="setSelection()"
        >
            <img class="answer-photo" :src="url">
            <div class="answer-name">{{name}}</div>
        </div>
    `,
  methods: {
    setSelection() {
      this.$emit('selected-answer', this.id);
    }
  }
};

Vue.component("my-question", {
  props: ["id", "name", "answers"],
  data() {
    return {
      selectedId: null
    };
  },
  components: {
    "my-answer": myAnswer
  },
  template: `
        <div class ="question">
            <div class="question-name">{{name}}</div>
            <div class="question-answers">
                <my-answer v-for="answer in answers"
                :id="answer.id" :name="answer.name" :url="answer.photoUrl"
                :selected="answer.id === selectedId" @selected-answer="selectAnswer"></my-answer>
            </div>
        </div>
    `,
  methods: {
    selectAnswer(answerId) {
      this.selectedId = answerId;
    }
  }
});

new Vue({
  el: '#app',
  data: {
    questions: [{
      id: 1,
      name: "Which color is your favorite?",
      answers: [{
          id: 1,
          name: 'red',
          photoUrl: ".../red"
        },
        {
          id: 2,
          name: 'green',
          photoUrl: ".../green"
        },
        {
          id: 3,
          name: 'blue',
          photoUrl: ".../blue"
        },
      ]
    }]
  }
});

.answer {
  cursor: pointer;
}

.selected {
  background-color: #f0f0f0;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="app">
  <my-question v-for="q in questions" :name="q.name" :answers="q.answers"></my-question>
</div>

这篇关于Vue 使用嵌套组件进行双向数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆