小编Waj*_*ouf的帖子

我想用来自 api get 请求的数据填充选择标签。这是我的 html 代码

<div id="app">
    <label for="country" class="control-label">Country</label>
    <select v-model="selectedCountry" @change="onChangeCountry" name="country" id="country" class="form-control" tabindex="11">
        <option selected disabled value="">Please select one</option>
        @foreach($countries as $country)
            <option value="{{ $country->id }}">{{ $country->name }}</option>
        @endforeach
    </select>
    <label for="city" class="control-label">City</label>
    <select v-model="cities" name="city" id="city" class="form-control" tabindex="12">
        <option v-bind:value="city.id">@{{ city.name }}</option>
    </select>
</div>

现在我的 JavaScript 代码：

<script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        selectedCountry: '',
        cities: []
      },
      methods: {
          onChangeCountry: function (event) {
            axios.get('http://localhost:8000/api/cities/country/' + this.selectedCountry)
            .then(function (
                this.cities …

我有 2 个网址

• /register

• /register?sponsor=4

该/register路由将给我一个干净的输入文本，我可以在其中输入所有内容
，第二个路由将带来相同的输入，但它的值为 4 并且它被禁用，因此用户无法修改它。
我设法使用 vue-router 从路由器动态获取参数，一切都很好，
但是当我访问时，/register我得到了干净的输入，但是一旦我开始输入，输入就会被禁用，我只能输入一个字符。
这是我到目前为止尝试过的，
HTML：

<input :disabled="sponsor ? true : false" v-model="sponsor" id="sponsor" type="number" class="form-control" name="sponsor" value="" required tabindex="14">  

Javascript Vuejs

<script type="text/javascript">
    var router = new VueRouter({
        mode: 'history',
        routes: []
    });
    new Vue({
        router,
        el: '#app',
        data () {
            return {
                cities: [],
                city: '',
                selectedCountry: '',
                sponsor: null
            }
        },
        mounted: function() {
            if (this.$route.query.sponsor) {
                this.sponsor = this.$route.query.sponsor
                console.log(this.sponsor)
            }
        },
        methods: …