javascript - Vue.js 2 + Webpack，V-Model 绑定(bind)并从 router.params 加载数据，可选默认不工作

Question

V-Model 从 router.params 绑定(bind)和加载数据，可选默认不工作 Vue.js 2

我有 4 个选择和 1 个文本输入

在我的 data() 方法中，我返回一个数组，其中包含选择选项元素的默认值。

我想要的是当组件加载时从 url (router.params) 获取值，然后从选择中选择正确的值，并将文本输入(通过路由器参数传递)显示回文本框 [搜索框]

我尝试了双向绑定(bind)、单向绑定(bind)、使用 setTimeout 函数的 jquery 更新，但仍然没有积极的结果

期待您的回复和建议，谢谢。

路线

import Vue from 'vue'
import Router from 'vue-router'
import HomeScreen from '@/components/HomeScreen'
import MangaSearch from '@/components/MangaSearch'
import MangaView from '@/components/MangaView'
import MangaHeaderMenuComponent from '@/components/reusable/MainMenuComponent'
import MangaSearchComponent from '@/components/reusable/MangaSearchComponent'
import MangaPopularComponent from '@/components/reusable/MangaPopularComponent'
import MangaResultsComponent from '@/components/reusable/MangaResultsComponent'

Vue.component('manga-header-menu', MangaHeaderMenuComponent)
Vue.component('manga-search', MangaSearchComponent)
Vue.component('manga-popular', MangaPopularComponent)
Vue.component('manga-results', MangaResultsComponent)

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HomeScreen',
      component: HomeScreen
    },
    {
      path: '/search',
      name: 'MangaSearch',
      component: MangaSearch
    },
    {
      path: '/manga/view',
      name: 'MangaView',
      component: MangaView
    },
  ]
})

代码如下:

    <template>
    <div class="search-container">
         <div class="search-form-container">
            <input type="text" v-on:keypress.enter="search" id="q" col="10" placeholder="Search Here" />
        </div>
        <div class="search-filter-container">
            <div><select id="search-genre" class="search-filter-field">
                    <option :disabled="true" :selected="true">Genre</option>
                    <option v-for="genre in genres" v-bind:value="genre"> {{ genre }}</option>
            </select></div>
            <div><select id="search-date" class="search-filter-field">
                    <option :disabled="true" :selected="true">Date</option>
                    <option v-for="date in dates" v-bind:value="date"> {{ date }}</option>
            </select></div>
            <div><select id="search-rating" class="search-filter-field">
                    <option :disabled="true" :selected="true">Rating</option>
                    <option v-for="rating in ratings" v-bind:value="rating"> {{ rating }}</option>
            </select></div>
            <div><select id="search-language" class="search-filter-field">
                    <option :disabled="true" :selected="true">Language</option>
                    <option v-for="language in languages" v-bind:value="language"> {{ language }}</option>
            </select></div>
    </div>
</div>
</template>

<script>
export default {
    data (){
        return {
            /* Filter Options */
            /* - Genre List*/
            genres: [ 'All', 'Action', '' ],
            /* - Date/Time Frame List*/
            dates: [ 'All', 'Last Month', 'Last Year'],
            /* - Ratings List*/
            ratings: [ 'All','0', '1', '2', '3', '4', '5' ],
            /* - Language List*/
            languages: [ 'All', 'Afrikaans','Albanian','Amharic','Arabic','Bahasa','Bengali','Bosnian','Bravanese','Bulgarian','Catalan','Chinese (Simplified)','Chinese (Trad–HK)','Chinese (Traditional)','Croatian','Czech','Danish','Dutch','Estonian','Euro English','Farsi','Finnish','French (Belgian)','French (Canadian)','French (Euro)','German','Greek','Gujarati','Haitian Creole','Hebrew','Hindi','Hmong','Hungarian','Icelandic','Italian','Japanese','Javanese','Kashmiri','Kazakh','Khmer','Korean','Laotian','Latvian','Lithuanian','Macedonian','Malay','Malayalam','Mandinka','Marathi','Norwegian','Oromo','Polish','Portuguese','Punjabi','Romanian','Russian','Serbian','Sinhalese','Slovak','Somali','Spanish (Iberian)','Spanish (Latin)','Sudanese Arabic','Swedish','Tagalog','Tamil','Telegu','Thai','Turkish','Ukrainian','Urdu','Vietnamese' ],

            /* Local Storage For Filter Values */
            name: (this.$route.params.name ? this.$route.params.name : ''),
            genre: (this.$route.params.genre ? this.$route.params.genre : 'Genre'),
            date: (this.$route.params.date ? this.$route.params.date : 'Date'),
            rating: (this.$route.params.rating ? this.$route.params.rating : 'Rating'),
            language: (this.$route.params.language ? this.$route.params.language : 'Language')
        };
        return data;
    },
    methods: {
        search (){
            this.$router.push({
                path: 'search',
                query: {
                    name: $('#q').val(),
                    genre: $('#search-genre').val(),
                    date: $('#search-date').val(),
                    rating: $('#search-rating').val(),
                    language: $('#search-language').val()
                }
            });
        }
    },
}
</script>

Answer 1

这段代码有很多问题:

1. 您没有使用 Vue 的 react 性。
2. 您读取了路由 params，但使用 query 重定向(它有效，但如果您更改路由 params)
3. 您不将从路由中获取的参数分配给您的表单字段。

---

首先，将 filter:{} 添加到 data(它将存储当前的过滤器字段)，让我们通过路由更改来更新它:

  export default {
    data() {
      return {
        // filter options omitted for better readability
        // ...
        filter: {},
      };
    },
    watch: {
      '$route'(to) {
        if (to.name === 'MangaSearch') {
          this.filter = Object.assign({}, to.query);
        }
      },
    },
    created() {
      this.filter = Object.assign({}, this.$route.query);
    },
    methods: {
      search() {
        this.$router.push({
          path: '/search',
          query: this.filter
        });
      }
    },
  }

接下来，让我们使用 v-model 将表单字段与此过滤器链接起来:

<div class="search-form-container">
    <input type="text" v-model="filter.name" @keypress.enter="search" id="q" col="10" placeholder="Search Here" />
</div>
<div class="search-filter-container">
    <div><select v-model="filter.genre" id="search-genre" class="search-filter-field">
        <option disabled>Genre</option>
        <option v-for="genre in genres" :value="genre">{{ genre }}</option>
    </select></div>
    <div><select v-model="filter.date" id="search-date" class="search-filter-field">
        <option disabled>Date</option>
        <option v-for="date in dates" :value="date">{{ date }}</option>
    </select></div>
    <div><select v-model="filter.rating" id="search-rating" class="search-filter-field">
        <option disabled>Rating</option>
        <option v-for="rating in ratings" :value="rating">{{ rating }}</option>
    </select></div>
    <div><select v-model="filter.language" id="search-language" class="search-filter-field">
        <option disabled>Language</option>
        <option v-for="language in languages" :value="language">{{ language }}</option>
    </select></div>
</div>

就是这样。您甚至不再需要 jQuery。