我有两个独立的组件。我有一个下拉列表和一个文本输入字段。我正试图弄清楚如何在下拉菜单中选择内容后启用文本字段。我是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>
谢谢！
下面是一个如何实现您想要的目标的示例。
阅读Props的文档。这将帮助您在组件之间传递数据。
它使用v-model将数据传递给父组件，父组件是一个称为value的prop和一个名为input的emit事件的组合。然后，父组件将disabledprop传递给输入组件，由输入组件决定其是否被禁用。
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>