V-модель Связывает и загружает данные из router.params с необязательным значением по умолчанию, не работающим Vue.js 2
У меня есть 4 выбора и 1 ввод текста
в моем методе data () я возвращаю массив со значениями по умолчанию для элементов опции selects.
я хочу, чтобы компонент загружался, чтобы получить значения из URL (router.params), а затем выбрать правильное значение из select, а также отобразить текстовый ввод (передаваемый через параметры маршрутизатора) обратно в текстовое поле [ окно поиска]
Я пробовал двухстороннее связывание, одностороннее связывание, обновление jquery с использованием функции setTimeout, но положительных результатов по-прежнему нет
Я с нетерпением жду ваших ответов и советов, спасибо.
маршруты
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>