Блог

У меня есть два отдельных компонента. У меня есть выпадающий список и поле ввода текста. Я пытаюсь выяснить, как включить текстовое поле после выбора чего-либо в выпадающем списке. Я новичок в Vue, поэтому я не понял, как разделить реквизит между компонентами.

Вот мой выпадающий компонент

 <template>
    <div>
      <select v-model="selectedApp" @change="onChangeSelect($event)">
        <option selected disabled value="">Choose</option>
        <option v-for="result in results" :value="result.id">{{ result.name }}</option>
      </select>
      
    </div>
 </template>
<script>

import axios from 'axios'
export default {
    
  data() {
    return {
       selectedApp: "",
       results: []
    }
  },
  async mounted() {
    try {
       const response = await axios.get('/apdata', { params: { query: this.query } })
       this.results = response.data
    } catch(err) {
      console.log(err)
    }
  },

  methods: {
     onChangeSelect(e) {
         this.input_disabled = (e.target.value == false)
     }
  }

  }
</script>

 

Вот мое тестовое поле ввода. У меня это отключено по умолчанию.

 <template>
 <div>
  <input type="text" placeholder="Source client" v-model="query" 
  v-on:keyup="autoComplete" 
  :disabled="input_disabled"
  @keydown.esc="clearText" class="form-control">
   <span class="instructiontext"> Search for id, name or coid</span>
  <div class="panel-footer" v-if="results.length">
   <ul class="list-group">
    <li class="list-group-item" v-for="result in results">
   <a href="#" @click="getClient(result.name)">{{ result.name   "-"   result.oid }} </a>
    </li>
   </ul>
  </div>
 </div>
</template>
<script>
import axios from 'axios'
 export default{

  props: ['app_id'],
  data(){
   return {
    input_disabled: true,
    selected: '',
    query: '',
    results: []
   }
  },
  methods: {

    getClient(name) {
        this.query = name;
        this.results = [];
    },
  
    clearText(){
        this.query = ''
    },
    autoComplete(){
    this.results = [];
    if(this.query.length > 2){
     axios.get('/getclientdata',{params: {query: this.query}}).then(response => {
      this.results = response.data;
     });
    }
   }
  },

  
 }
</script>

<style>

.instructiontext{
    color:gray;
    margin-left: 5px;
}

</style>

 

Спасибо!

Вот пример того, как вы можете достичь того, чего хотите.

Ознакомьтесь с документацией по реквизитам. Это поможет вам передавать данные между вашими компонентами.

Он используется v-model для передачи данных родительскому компоненту, который представляет собой комбинацию prop вызываемого value и вызываемого emit события input . Затем родительский компонент передает a disabled prop входному компоненту, который решает, отключен ли он.

 Vue.config.productionTip = false;
Vue.config.devtools = false;

Vue.component("drop-down", {
  template: '<select @input="onInput"><option value="">Please select</option><option :value="true">Yes</option><option :value="false">No</option></select>',
  methods: {
    onInput(ev) {
      this.$emit("input", ev.target.value === 'true');
    }
  }
});

Vue.component("test-input", {
  props: {
    disabled: {
      type: Boolean,
      default: true
    }
  },
  template: '<input type="text" :disabled="disabled" />'
});

new Vue({
  el: "#app",
  data: () => {
    return {
      selectedOption: null
    }
  }
}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
    <div>
      <drop-down v-model="selectedOption" />
    </div>

    <div>
      <test-input :disabled="!selectedOption" />
    </div>
    
    <div>
          <h5>DEMO: {{JSON.stringify(selectedOption)}}</h5>
    </div>
  </div>
</div>