如何将 vue 下拉栏中的选定选项用作 link 中的参数？

Question

我在 vue 中有这个自动完成功能，我用来自 json-server 的值填充自动完成下拉列表。下面是相关的代码块：

  <v-autocomplete dense
        filled
        label="Subject: "
        v-model="subject"
        :items="subject"
        item-text='example'
        item-value='example'>
        <option v-for="example in subject" v-bind:key="example.id" v-bind:title="example.title">{{ example }}</option>
</v-autocomplete>

<script>
export default {
    name: 'Inbox',
    data() {
        return {
            subject: [],
        }
    },
    mounted() {
        fetch('http://localhost:3000/subject')
            .then(res => res.json())
            .then(data => this.subject = data)
            .catch(err => console.log(err.message)),

我如何才能使用从下拉列表中选择的值作为参数来访问数据库中的实际值？例如，我想使用选定的值来进行此调用。

      fetch('http://localhost:3000/subject=THE SELECTED VALUE')

谢谢！

Answer 1

您应该将 items 属性设置为所有主题的列表，并且 v-model="selectedSubject" 将仅包含所选值。另外你不应该在 v-autocomplete 中使用 <option> 它已经为你做了。所以现在你可以监听 @change 事件并在 subject 发生变化时调用 fetch：

<v-autocomplete dense
     filled
     label="Subject: "
     v-model="selectedSubject"
     :items="subjects"
     item-text='example'
     item-value='example'
     @change='fetchSubject'
>
</v-autocomplete>

data() {
  return {
    subjects: [],
    selectedSubject: null,
  }
},
mounted() {
  fetch('http://localhost:3000/subject')
     .then(res => res.json())
     .then(data => this.subjects = data)
     .catch(err => console.log(err.message)),
},
methods: {
  fetchSubject(selectedSubject) {
    if (selectedSubject) {
       fetch(`http://localhost:3000/subject=${selectedSubject}`).then((res) => {
           // do your actions
       })
    }
  }
}

如何将 vue 下拉栏中的选定选项用作 link 中的参数？

How to use selected option in vue dropdown bar as a parameter in a link?

javascript

parameters

vue.js

vuetify.js