如何将数据从组件文件传递到vue js中的查看文件

Question

I'm trying to pass data from vue component to vue view file. I tried creating props but it didn't work. I have one component file on path src/components/list.vue and another file on path src/views/select.vue

The flow goes like this: User lands on select.vue page, here on click of input box a pop-up appears which have have list of elements in <ul> <li> tag from list.vue (component file).

What I want to achieve:

Whenever user select any option from list.vue file, modal pop-up should close and selected element should be displayed in input box of select.vue file.

Below is code:

src/views/select.vue

    <label class="primary-label mb-2">First Question</label>
        <div class="form-block">
          <label class="secondary-label mb-1">Question</label>
          <b-form-input placeholder="Select Question" v-model="questions.first" class="form-control l-input" @click="onOptionChanged"></b-form-input>
        </div>
        <div class="form-block">
          <label class="secondary-label mb-1">Answer</label>
          <b-form-input v-model="answers.first" placeholder="Enter answer" class="form-control l-input"></b-form-input>
        </div>

   <script>
     export default {
   data() {
  return {
    questions: {
      first: null,          
    },
    answers: {
      first: null,          
    },
    options: [
      { value: null, text: 'Select Question', disabled:true },
      { value: 1, text: 'In what city were you born?' },
      { value: 2, text: 'What is the name of your favorite pet?' },
      { value: 3, text: 'What is your mother\'s maiden name?' },
      { value: 4, text: 'What high school did you attend?' },
      { value: 5, text: 'What is the name of your first school?' },
      { value: 6, text: 'What was the make of your first car?' },
      { value: 7, text: 'What was your favorite food as a child?' },
      { value: 8, text: 'Where did you meet your spouse?' },
    ],               
  }
},
methods: {      
  onOptionChanged() {        
    var modal_ref = 'myModalRef';
    this.$refs[modal_ref].show();   
  },       
},
components: {
  SecurityQuestionsList,
},   
 }

src/components/list.vue

<template>
  <main>    
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="search-block">
        <span class="s-icon fa fa-search"></span>           
      </div>         
      <ul class="l-group" v-if="filteredQuestions.length > 0">
        <li class="d-flex align-items-center" :key="item.id" v-for="item in filteredQuestions" @click="onOptionSelect(item.question)"
        :class="selected === item.id ? 'my-selected-item-class':null">
          {{item.question}}
        </li>
      </ul>
    </div>
  </div>
   </div>  
   </main>
  </template>
  <script>
   export default {
data() {
  return {
    search: '',
    selected: null,
    questions: [
      { id: 1, question: 'In what city were you born?' },
      { id: 2, question: 'What is the name of your favorite pet?' },
      { id: 3, question: 'What is your mother\'s maiden name?' },
      { id: 4, question: 'What high school did you attend?' },
      { id: 5, question: 'What is the name of your first school?' },
      { id: 6, question: 'What was the make of your first car?' },
      { id: 7, question: 'What was your favorite food as a child?' },
      { id: 8, question: 'Where did you meet your spouse?' },
    ],
  }
},
computed: {
  filteredQuestions() {
    return this.questions.filter(item => {
      return item.question.toLowerCase().includes(this.search.toLowerCase());
    });
  }
},        
methods: {
  onOptionSelect(selectedId) {
      this.selected = selectedId;            
      console.log(this.selected);
      this.$emit('questions-selected', this.selected);
  }, 
}
} 
</script>

I am getting selected value in console but not sure how to catch it in search.vue file.

Thanks!

Answer 1

You need to connect your components and pass props, try like following snippet:

 Vue.component('list', { template: ` <main> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="search-block"> <span class="s-icon fa fa-search"></span> </div> <ul class="l-group" v-if="filteredQuestions.length > 0"> <li class="d-flex align-items-center" :key="item.id" v-for="item in filteredQuestions" @click="onOptionSelect(item.question)" :class="selected === item.id ? 'my-selected-item-class':null"> {{item.question}} </li> </ul> </div> </div> </div> </main> `, props: ['search'], data() { return { selected: null, questions: [ { id: 1, question: 'In what city were you born?' }, { id: 2, question: 'What is the name of your favorite pet?' }, { id: 3, question: 'What is your mother\'s maiden name?' }, { id: 4, question: 'What high school did you attend?' }, { id: 5, question: 'What is the name of your first school?' }, { id: 6, question: 'What was the make of your first car?' }, { id: 7, question: 'What was your favorite food as a child?' }, { id: 8, question: 'Where did you meet your spouse?' }, ], } }, computed: { filteredQuestions() { if (this.search) { return this.questions.filter(item => { return item.question.toLowerCase().includes(this.search.toLowerCase()); }); } return this.questions } }, methods: { onOptionSelect(selectedId) { this.selected = selectedId; this.$emit('questions-selected', selectedId); }, } }) new Vue({ el: "#demo", name: 'select', data() { return { questions: { first: null, }, answers: { first: null, }, selected: false } }, methods: { onOptionChanged() { this.selected = true }, onSelected(val) { this.questions.first = val this.selected = false }, }, })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div id="demo"> <div> <label class="primary-label mb-2">First Question</label> <div class="form-block"> <label class="secondary-label mb-1">Question</label> <b-form-input placeholder="Select Question" v-model="questions.first" class="form-control l-input" @click="onOptionChanged()"></b-form-input> </div> <div class="form-block"> <label class="secondary-label mb-1">Answer</label> <b-form-input v-model="answers.first" placeholder="Enter answer" class="form-control l-input"></b-form-input> <list :search="questions.first" @questions-selected="onSelected" v-if="selected"></list> </div> </div> </div>