Question

我正在尝试使用Vue.js（上一版本）实现依赖选择，但是当我有一些v-for和v-if时，我的应用逻辑会中断。我无法理解我的错误在哪里。拜托，帮我解决问题。

点击Toggle !pickup并尝试更改区域选择，您会看到问题。您也可以使用v-if="!cartPage.pickup"删除div或将v-if更改为v-show，您可以看到，一切正常..

这是我的代码

var vm = new Vue({
  el: '#app',
  data: {
    userInfo: {
      loggedIn: false,
    },
    cartPage: {
      pickup: false,
      restaurants: {},
      currentCity: '',
      currentDistrict: '',
      currentRestaurant: '',
    },
  },
  methods: {
    setDefaultDistrict: function() {
      this.cartPage.currentDistrict = this.cartPage.currentCity.districts[0];
      this.setDefaultRestaurant();
    },
    setDefaultRestaurant: function() {
      this.cartPage.currentRestaurant = this.cartPage.currentDistrict.restaurants[0];
    },
  },
})

vm.cartPage.restaurants = [{
    city: "City 1",
    districts: [{
        districtName: "City 1 district 1",
        restaurants: [{
          placeName: "City 1 district 1 Restaurant 1",
          name: 'City 1 district 1 Restaurant 1',
          address: 'City 1 district 1 Restaurant 1',
          hours: '10:00–22:00',
        }, {
          placeName: "City 1 district 1 Restaurant 2",
          name: 'City 1 district 1 Restaurant 2',
          address: 'City 1 district 1 Restaurant 2',
          hours: '10:00–20:00',
        }]
      },

      {
        districtName: "City 1 district 2",
        restaurants: [{
          placeName: "City 1 district 2 Restaurant 1",
          name: 'City 1 district 2 Restaurant 1',
          address: 'City 1 district 2 Restaurant 1',
          hours: '12:00–22:00',
        }, {
          placeName: "City 1 district 2 Restaurant 2",
          name: 'City 1 district 2 Restaurant 2',
          address: 'City 1 district 2 Restaurant 2',
          hours: '12:00–22:00',
        }]
      }
    ],
  },

  {
    city: "City 2",
    districts: [{
        districtName: "City 2 district 1",
        restaurants: [{
          placeName: "City 2 district 1 Restaurant 1",
          name: 'City 2 district 1 Restaurant 1',
          address: 'City 2 district 1 Restaurant 1',
          hours: '10:00–22:00',
        }, {
          placeName: "City 2 district 1 Restaurant 2",
          name: 'City 2 district 1 Restaurant 2',
          address: 'City 2 district 1 Restaurant 2',
          hours: '10:00–20:00',
        }]
      },

      {
        districtName: "City 2 district 2",
        restaurants: [{
          placeName: "City 2 district 2 Restaurant 1",
          name: 'City 2 district 2 Restaurant 1',
          address: 'City 2 district 2 Restaurant 1',
          hours: '12:00–22:00',
        }, {
          placeName: "City 2 district 2 Restaurant 2",
          name: 'City 2 district 2 Restaurant 2',
          address: 'City 2 district 2 Restaurant 2',
          hours: '12:00–22:00',
        }]
      }
    ],
  }, {
    city: "City 3",
    districts: [{
      districtName: "City 3 district 1",
      restaurants: [{
        placeName: "City 3 district 1 Restaurant 1",
        name: 'City 3 district 1 Restaurant 1',
        address: 'City 3 district 1 Restaurant 1',
        hours: '10:00–22:00',
      }, ]
    }, ],
  },
]

vm.cartPage.currentCity = vm.cartPage.restaurants[0];
vm.cartPage.currentDistrict = vm.cartPage.currentCity.districts[0];
vm.cartPage.currentRestaurant = vm.cartPage.currentDistrict.restaurants[0];

.custom-radio {
  display: block;
  margin: 10px;
  border: 1px solid #000;
  cursor: pointer;
}

<script src="https://unpkg.com/vue@2.4.2"></script>


<div id="app">
  <div class="cart__delivery-and-pay">
    <h2 class="cart__delivery-and-pay--title">Heading</h2>
    <div class="delivery__block">
      <div class="delivery__block-header cf">
        <div class="delivery__variants"><span @click="cartPage.pickup = false" v-bind:class="{ 'active': !cartPage.pickup }" class="courier custom-radio">Toggle pickup</span><span @click="cartPage.pickup = true" v-bind:class="{ 'active': cartPage.pickup }" class="pickup custom-radio">Toggle !pickup</span></div>
      </div>
      <div class="delivery__cols">


       <!-- if delete this everything is working! -->
        <div v-if="!cartPage.pickup" class="delivery__col delivery__address">
          <div class="delivery__col-heading">Address:
            <div class="custom-select__wrapper item__option">
              <select class="custom-select">
                <optgroup label="Choose city">
                  <option value="1" v-for="singleCity in cartPage.restaurants">{{ singleCity.city }}</option>
                </optgroup>
              </select>
            </div>
          </div>
        </div>
         <!-- if delete this everything is working! -->
        
        <div v-if="cartPage.pickup" class="delivery__col delivery__address">
          <div class="delivery__col-heading">Address:
            <div class="custom-select__wrapper item__option delivery__address-city">
              <select v-model="cartPage.currentCity" @change="setDefaultDistrict" class="custom-select">
                <option v-for="singleCity in cartPage.restaurants" v-bind:value="singleCity" v-bind:selected="cartPage.currentCity.city == singleCity.city ? true : false">{{ singleCity.city }}</option>
              </select>
            </div>
          </div>
          <div class="delivery__row delivery__row-flex-start">District
            <div class="custom-select__wrapper item__option">
              <select v-model="cartPage.currentDistrict" @change="setDefaultRestaurant" class="custom-select">
                <option v-for="singleDistrict in cartPage.currentCity.districts" v-bind:value="singleDistrict">{{ singleDistrict.districtName }}</option>
              </select>
            </div>
          </div>
          <div class="delivery__row delivery__row-flex-start">Restaurant:
            <div class="custom-select__wrapper item__option">
              <select v-model="cartPage.currentRestaurant" class="custom-select">
                <option v-for="singleRestaurant in cartPage.currentDistrict.restaurants" v-bind:value="singleRestaurant">{{ singleRestaurant.placeName }}</option>
              </select>
            </div>
          </div>
          <div class="delivery__row delivery__row-flex-start delivery__row--last-row"><span v-if="cartPage.currentRestaurant" class="delivery__row-note">{{ cartPage.currentRestaurant.address }}, {{ cartPage.currentRestaurant.hours }} ч.</span></div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

你在哪里：

<optgroup label="Choose city">
  <option value="1" v-for="singleCity in cartPage.restaurants">
    {{ singleCity.city }}
  </option>
</optgroup>

您没有正确设置option的值，您总是拥有＆＃34; 1＆＃34;。

试试这个：

<optgroup label="Choose city">
  <option v-bind:value="singleCity" 
          v-for="singleCity in cartPage.restaurants">
    {{ singleCity.city }}
  </option>
</optgroup>

v-if，v-for broken dependent选择逻辑

1 个答案: