vue.js - 如果我在下面的文本框中键入，则 Vue 组件选择重置

Question

有一个奇怪的问题，如果我更改“部分/县”选项，然后在下面的框中输入，下拉菜单会重置......不知道为什么，有人可以重新审视它吗？

Vue.component('Tabs', {
  template: `<div class="tabs">
        <ul>
            <li v-for="(value, index) in data.data" v-bind:class="{ 'is-active': selectedTab === value.id }" v-on:click="selectedTab = value.id">
                <a><span v-html="labelText(index)"></span></a>
            </li>
            <li v-if="addButton" class="add"><a href="javascript:void(0)" v-on:click="add()">Add New <i class="fas fa-plus-circle"></i></a></li>
        </ul>
        <slot v-bind:data="data" v-bind:selectedTab="selectedTab" :code="key"></slot>
    </div>`,
  props: [ 'add-button', 'label', 'endpoint' ],
  data: function() {
      return {
          selectedTab: null,
          labelNumber: false,
          data: { data: [] }
      }
  },
  mounted() {

      let _self = this;

      let children = this.$el.querySelectorAll('div > div.content');

      _self.data = {
        data: [
          {
            id: 0,
            address_line_1: 'test',
            address_line_2: 'test2',
            address_line_3: 'test3',
            address_line_4: 'test4',
            country: {
              id: 1,
              name: 'England'
            },
            country_id: 1,
            county: {
              code: 'st',
              county_id: 1,
              description: 'Staffordshire'
            },
            county_code: 'st',
            latitude: '21.244545',
            longitude: '-12.24242',
            postcode: 'ST1 4LA',
            section: {
              id: 1,
              name: 'Global'
            },
            section_id: 1,
            showOnMap: 1,
            town: 'Stoke-on-Trent',
            website_id: 1966,
            website_location_id: 27
          },
          {
            id: 1,
            address_line_1: 'test',
            address_line_2: 'test2',
            address_line_3: 'test3',
            address_line_4: 'test4',
            country: {
              id: 1,
              name: 'England'
            },
            country_id: 1,
            county: {
              code: 'st',
              county_id: 1,
              description: 'Staffordshire'
            },
            county_code: 'st',
            latitude: '21.244545',
            longitude: '-12.24242',
            postcode: 'ST1 4LA',
            section: {
              id: 1,
              name: 'Global'
            },
            section_id: 1,
            showOnMap: 1,
            town: 'Stoke-on-Trent',
            website_id: 1966,
            website_location_id: 27
          }
        ],
        sections: [
          {id: 1, name: "Global"},
          {id: 2, name: "Forecourt"},
          {id: 3, name: "Servicing"},
          {id: 4, name: "Workshop"},
          {id: 5, name: "Repair Centre"}
        ],
        countries: [
          {id: 1, name: "England"},
          {id: 2, name: "Scotland"},
          {id: 3, name: "Wales"},
          {id: 4, name: "Northern Ireland"},
          {id: 5, name: "Ireland"}
        ],
        counties: [
          {code: 'st', county_id: 1, description: 'Staffordshire'},
          {code: 'su', county_id: 2, description: 'Somewhere'}
        ]
      };

      _self.selectedTab = _self.data.data[0].id;

  },
  methods: {
      add: function() {
          let key = this.key();

          this.data.data.push({ id: key });
          this.selectedTab = key;
      },
      key: function() { return Math.random().toString(36).replace(/[^a-z0-9]+/g, '').substr(0, 10); },
      labelText: function(index) {
          let label = this.label;
          if (this.data.data[index].label) label = this.data.data[index].label;
          if (label.indexOf('#') > -1) {
              return label.replace('#', (index + 1));
          }
          return label;
      }
  }

});
window.app = new Vue({
  el: '#app'
});

div.tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
div.tabs li > a > svg {
  margin-left: 5px;
}
div.tabs li > a > a {
  border-bottom: none;
  padding: 5px 0 5px 5px;
}
div.tabs li > a .fa-times-circle {
  -webkit-transition: 0.1s ease-in-out all;
  transition: 0.1s ease-in-out all;
}
div.tabs li > a .fa-times-circle:hover {
  color: hsl(348, 100%, 61%);
}
div.tabs .add a {
  background: hsl(141, 71%, 48%);
  color: #fff;
  -webkit-transition: 0.2s ease-in-out all;
  transition: 0.2s ease-in-out all;
}
div.tabs .add a:hover {
  background: #22c65b;
  border-bottom-color: #22c65b;
}
div.tabs .to-right {
  margin-right: 0;
  margin-left: auto;
}
div.tabs .content {
  display: none;
  background: white;
  padding: 20px;
  border: 1px solid #dbdbdb;
  border-top: 0;
  border-radius: 0 0 3px 3px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
div.tabs .content.is-active {
  display: block;
}
div.tabs .content:last-child {
  margin-bottom: 1.5rem !important;
}
div.tabs .content .tabs {
  width: 100%;
}
div.tabs .content .tabs .content {
  background: #f5f5f5;
  padding: 0;
}
div.tabs .content .tabs .content p {
  text-align: center;
}
div.tabs .content .tabs .content table {
  table-layout: fixed;
}
div.tabs .content .tabs .content td.results-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  border-bottom: 6px solid #ecf0f1;
}
div.tabs .content .tabs ul {
  margin: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  
  <Tabs add-button="true" label="Address #">

      <div slot-scope="{ data, selectedTab }">
          <div class="content" v-for="(location, index) in data['data']" :class="{ 'is-active': selectedTab === location.id }">
              <div class="columns">

                  <div class="column form_section">

                      <h2 class="form_section--header">Address {{ (index + 1) }}</h2>

                      <div class="field">
                          <div class="select">
                              <select name="sectionAddress[]">
                                  <option>Select Section</option>
                                  <option v-for="section in data['sections']" v-bind:value="section.id" :selected="location.section && section.id == location.section.id">{{ section.name }}</option>
                              </select>
                          </div>
                      </div>

                      <div class="field">
                          <input class="input" type="text" name="address_line_1[]" placeholder="Address Line 1" v-model="location.address_line_1">
                      </div>

                      <div class="field">
                          <input class="input" type="text" name="address_line_2[]" placeholder="Address Line 2" v-model="location.address_line_2">
                      </div>

                      <div class="field">
                          <input class="input" type="text" name="address_line_3[]" placeholder="Address Line 3" v-model="location.address_line_3">
                      </div>

                      <div class="field">
                          <input class="input" type="text" name="address_line_4[]" placeholder="Address Line 4" v-model="location.address_line_4">
                      </div>

                      <div class="field">
                          <input class="input" type="text" name="town[]" placeholder="Town" v-model="location.town">
                      </div>

                      <div class="field">
                          <div class="select">
                              <select name="county[]">
                                  <option>Select County</option>
                                  <option v-for="county in data['counties']" v-bind:value="county.code" :selected="location.county && county.code == location.county.code">{{ county.description }}</option>
                              </select>
                          </div>
                      </div>

                  </div>

                  <div class="column form_section">

                      <h2 class="form_section--header">Map Details</h2>

                      <div class="field">
                          <input class="input" type="text" name="postcode[]" placeholder="Postcode" v-model="location.postcode">
                      </div>


                      <div class="field">
                          <input class="input" type="text" name="latitude[]" placeholder="Latitude" v-model="location.latitude">
                      </div>

                      <div class="field">
                          <input class="input" type="text" name="longitude[]" placeholder="Longitude" v-model="location.longitude">
                      </div>

                      <div class="field">
                          <input class="input" type="text" name="zoom[]" placeholder="Zoom level">
                      </div>

                      <h2 class="form_section--sub_header">Show on map</h2>

                      <div class='checkbox'>
                          <label class='checkbox__container' :for="'showOnMap' + location.id">
                              <input :id="'showOnMap' + location.id" type="checkbox" name="showOnMap[]" class="checkbox__toggle" value="1" v-model="location.showOnMap">
                              <span class='checkbox__checker'></span>
                              <span class='checkbox__cross'></span>
                              <span class='checkbox__ok'></span>
                              <svg class='checkbox__bg' space='preserve' style='enable-background:new 0 0 110 43.76;' version='1.1' viewbox='0 0 110 43.76'>
                                  <path class='shape' d='M88.256,43.76c12.188,0,21.88-9.796,21.88-21.88S100.247,0,88.256,0c-15.745,0-20.67,12.281-33.257,12.281,S38.16,0,21.731,0C9.622,0-0.149,9.796-0.149,21.88s9.672,21.88,21.88,21.88c17.519,0,20.67-13.384,33.263-13.384,S72.784,43.76,88.256,43.76z'></path>
                              </svg>
                          </label>
                      </div>

                      <input type="hidden" name="idAddressDetail[]" value="">

                  </div>
              </div>
          </div>
      </div>

  </Tabs>

</div>

标签： vue.js

Answer 1

你v-bind设置错了。要使其正常工作，您需要将完整选择列表的值绑定到location. 我希望能解决你的问题。

Vue.component('Tabs', {
  template: `<div class="tabs">
        <ul>
            <li v-for="(value, index) in data.data" v-bind:class="{ 'is-active': selectedTab === value.id }" v-on:click="selectedTab = value.id">
                <a><span v-html="labelText(index)"></span></a>
            </li>
            <li v-if="addButton" class="add"><a href="javascript:void(0)" v-on:click="add()">Add New <i class="fas fa-plus-circle"></i></a></li>
        </ul>
        <slot v-bind:data="data" v-bind:selectedTab="selectedTab" :code="key"></slot>
    </div>`,
  props: [ 'add-button', 'label', 'endpoint' ],
  data: function() {
      return {
          selectedTab: null,
          labelNumber: false,
          data: { data: [] }
      }
  },
  mounted() {

      let _self = this;

      let children = this.$el.querySelectorAll('div > div.content');

      _self.data = {
        data: [
          {
            id: 0,
            address_line_1: 'test',
            address_line_2: 'test2',
            address_line_3: 'test3',
            address_line_4: 'test4',
            country: {
              id: 1,
              name: 'England'
            },
            country_id: 1,
            county: {
              code: 'st',
              county_id: 1,
              description: 'Staffordshire'
            },
            county_code: 'st',
            latitude: '21.244545',
            longitude: '-12.24242',
            postcode: 'ST1 4LA',
            section: {
              id: 1,
              name: 'Global'
            },
            section_id: 1,
            showOnMap: 1,
            town: 'Stoke-on-Trent',
            website_id: 1966,
            website_location_id: 27
          },
          {
            id: 1,
            address_line_1: 'test',
            address_line_2: 'test2',
            address_line_3: 'test3',
            address_line_4: 'test4',
            country: {
              id: 1,
              name: 'England'
            },
            country_id: 1,
            county: {
              code: 'st',
              county_id: 1,
              description: 'Staffordshire'
            },
            county_code: 'st',
            latitude: '21.244545',
            longitude: '-12.24242',
            postcode: 'ST1 4LA',
            section: {
              id: 1,
              name: 'Global'
            },
            section_id: 1,
            showOnMap: 1,
            town: 'Stoke-on-Trent',
            website_id: 1966,
            website_location_id: 27
          }
        ],
        sections: [
          {id: 1, name: "Global"},
          {id: 2, name: "Forecourt"},
          {id: 3, name: "Servicing"},
          {id: 4, name: "Workshop"},
          {id: 5, name: "Repair Centre"}
        ],
        countries: [
          {id: 1, name: "England"},
          {id: 2, name: "Scotland"},
          {id: 3, name: "Wales"},
          {id: 4, name: "Northern Ireland"},
          {id: 5, name: "Ireland"}
        ],
        counties: [
          {code: 'st', county_id: 1, description: 'Staffordshire'},
          {code: 'su', county_id: 2, description: 'Somewhere'}
        ]
      };

      _self.selectedTab = _self.data.data[0].id;

  },
  methods: {
      add: function() {
          let key = this.key();

          this.data.data.push({ id: key });
          this.selectedTab = key;
      },
      key: function() { return Math.random().toString(36).replace(/[^a-z0-9]+/g, '').substr(0, 10); },
      labelText: function(index) {
          let label = this.label;
          if (this.data.data[index].label) label = this.data.data[index].label;
          if (label.indexOf('#') > -1) {
              return label.replace('#', (index + 1));
          }
          return label;
      }
  }

});
window.app = new Vue({
  el: '#app'
});

div.tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
div.tabs li > a > svg {
  margin-left: 5px;
}
div.tabs li > a > a {
  border-bottom: none;
  padding: 5px 0 5px 5px;
}
div.tabs li > a .fa-times-circle {
  -webkit-transition: 0.1s ease-in-out all;
  transition: 0.1s ease-in-out all;
}
div.tabs li > a .fa-times-circle:hover {
  color: hsl(348, 100%, 61%);
}
div.tabs .add a {
  background: hsl(141, 71%, 48%);
  color: #fff;
  -webkit-transition: 0.2s ease-in-out all;
  transition: 0.2s ease-in-out all;
}
div.tabs .add a:hover {
  background: #22c65b;
  border-bottom-color: #22c65b;
}
div.tabs .to-right {
  margin-right: 0;
  margin-left: auto;
}
div.tabs .content {
  display: none;
  background: white;
  padding: 20px;
  border: 1px solid #dbdbdb;
  border-top: 0;
  border-radius: 0 0 3px 3px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
div.tabs .content.is-active {
  display: block;
}
div.tabs .content:last-child {
  margin-bottom: 1.5rem !important;
}
div.tabs .content .tabs {
  width: 100%;
}
div.tabs .content .tabs .content {
  background: #f5f5f5;
  padding: 0;
}
div.tabs .content .tabs .content p {
  text-align: center;
}
div.tabs .content .tabs .content table {
  table-layout: fixed;
}
div.tabs .content .tabs .content td.results-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  border-bottom: 6px solid #ecf0f1;
}
div.tabs .content .tabs ul {
  margin: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  
  <Tabs add-button="true" label="Address #">

      <div slot-scope="{ data, selectedTab }">
          <div class="content" v-for="(location, index) in data['data']" :class="{ 'is-active': selectedTab === location.id }">
              <div class="columns">

                  <div class="column form_section">

                      <h2 class="form_section--header">Address {{ (index + 1) }}</h2>

                      <div class="field">
                          <div class="select">
                              <select v-model="location.section.id" name="sectionAddress[]">
                                  <option>Select Section</option>
                                  <option v-for="section in data['sections']" v-bind:value="section.id" >{{ section.name }}</option>
                              </select>
                          </div>
                      </div>

                      <div class="field">
                          <input class="input" type="text" name="address_line_1[]" placeholder="Address Line 1" v-model="location.address_line_1">
                      </div>

                      <div class="field">
                          <input class="input" type="text" name="address_line_2[]" placeholder="Address Line 2" v-model="location.address_line_2">
                      </div>

                      <div class="field">
                          <input class="input" type="text" name="address_line_3[]" placeholder="Address Line 3" v-model="location.address_line_3">
                      </div>

                      <div class="field">
                          <input class="input" type="text" name="address_line_4[]" placeholder="Address Line 4" v-model="location.address_line_4">
                      </div>

                      <div class="field">
                          <input class="input" type="text" name="town[]" placeholder="Town" v-model="location.town">
                      </div>

                      <div class="field">
                          <div class="select">
                              <select v-model="location.county.code" name="county[]">
                                  <option>Select County</option>
                                  <option v-for="county in data['counties']" v-bind:value="county.code" >{{ county.description }}</option>
                              </select>
                          </div>
                      </div>

                  </div>

                  <div class="column form_section">

                      <h2 class="form_section--header">Map Details</h2>

                      <div class="field">
                          <input class="input" type="text" name="postcode[]" placeholder="Postcode" v-model="location.postcode">
                      </div>


                      <div class="field">
                          <input class="input" type="text" name="latitude[]" placeholder="Latitude" v-model="location.latitude">
                      </div>

                      <div class="field">
                          <input class="input" type="text" name="longitude[]" placeholder="Longitude" v-model="location.longitude">
                      </div>

                      <div class="field">
                          <input class="input" type="text" name="zoom[]" placeholder="Zoom level">
                      </div>

                      <h2 class="form_section--sub_header">Show on map</h2>

                      <div class='checkbox'>
                          <label class='checkbox__container' :for="'showOnMap' + location.id">
                              <input :id="'showOnMap' + location.id" type="checkbox" name="showOnMap[]" class="checkbox__toggle" value="1" v-model="location.showOnMap">
                              <span class='checkbox__checker'></span>
                              <span class='checkbox__cross'></span>
                              <span class='checkbox__ok'></span>
                              <svg class='checkbox__bg' space='preserve' style='enable-background:new 0 0 110 43.76;' version='1.1' viewbox='0 0 110 43.76'>
                                  <path class='shape' d='M88.256,43.76c12.188,0,21.88-9.796,21.88-21.88S100.247,0,88.256,0c-15.745,0-20.67,12.281-33.257,12.281,S38.16,0,21.731,0C9.622,0-0.149,9.796-0.149,21.88s9.672,21.88,21.88,21.88c17.519,0,20.67-13.384,33.263-13.384,S72.784,43.76,88.256,43.76z'></path>
                              </svg>
                          </label>
                      </div>

                      <input type="hidden" name="idAddressDetail[]" value="">

                  </div>
              </div>
          </div>
      </div>

  </Tabs>

</div>