Question

我正在显示两个Something went wrong. Please use Check for broken extensions to see if a loaded extension breaks this part of the install tool and unload it. The box below may additionally reveal further details on what went wrong depending on your debug settings. It may help to temporarily switch to debug mode using `Settings > Configuration Presets > Debug settings`. If this error happens at an early state and no full exception back trace is shown, it may also help to manually increase debugging output in `typo3conf/LocalConfiguration.php: ['BE']['debug'] => true, ['SYS']['devIPmask'] => '*', ['SYS']['displayErrors'] => 1, ['SYS']['systemLogLevel'] => 0, ['SYS']['exceptionalErrors'] => 12290`元素。根据在第一个<select>上选择的<select>，第二个<option>被禁用。问题是，当我在第一个<select>上选择一个<option>时，我想更改第二个<select>上显示的数据。例如，如果我在第一个<select>上选择District 1，那么我想在第二个<select>中看到john和mary作为选项，但是如果我选择<select>，我想要District 2和josef。考虑一下我正在Laravel上并使用Vue。

我已经使用Vue完成了第一部分，根据第二个charles上的选择禁用了第二个<select>（只有第一个<select>上的第三个选项才能启用第二个<select> <select>）：

https://jsfiddle.net/vowexafm/122/

模板：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <select @change="treat">
    <option value="District1">District 1</option><!--disable 2nd select-->
    <option value="District2">District 2</option><!--disable 2nd select-->
    <option value="District3">District 3</option><!--enable 2nd select-->
  </select>
  <br><br>
  <select :disabled="isDisabled">
    <option>cds 1</option>
    <option>cds 2</option>
    <option>cds 3</option>
  </select>
</div>

脚本：

new Vue({
  el:'#app',
  data: {
    isDisabled: true,
  },
  methods: {
    treat: function(e) {
      if (e.target.options.selectedIndex == 0 || 
          e.target.options.selectedIndex == 1) {
        return this.disable();
      }

      if (e.target.options.selectedIndex != 0 && 
          e.target.options.selectedIndex != 1) {
        return this.enable();
      }
    },
    enable: function() {
      return this.isDisabled = false; // enables second select
    },
    disable: function() {
      return this.isDisabled = true; // disables second select
    }
  },
});

现在，我想要解决方案，例如：如果我在第一个区中选择1区，我想在第二个区中看到john和mary作为选项，但是如果我选择第2区，我想看看josef和charles在第二个。

Answer 1

从laravel中填充data对象，使其具有第二选择的选项以及第一选择中当前所选索引的值

data: {
  secondSelect: [
    ['john', 'mary'],
    ['josef', 'charles']
  ],
  currentIndex: 0
}

定义一个computed property，该值根据currentIndex返回第二个选择的值

computed: {
  persons () {
    return this.secondSelect[parseInt(this.currentIndex)]
  }
}

使用computed property个人生成第二个选择，并使用v-model捕获currentIndex。

<div id="app">
 <select @change="treat" v-model="selectedIndex">
  <option value="0">District 1</option><!--diable-->
  <option value="1">District 2</option><!--diable-->
  <option value="2">District 3</option><!--unable-->
 </select>
 <br><br>
 <select :disabled="isDisabled">
  <option v-for="option in persons" :value="option">{{option}}</option>
 </select>
</div>

Answer 2

现在是我想要的解决方案，例如，如果我在首先，我想在第二个中看到“ john”和“ mary”作为选项，但是如果选择“第2区”，我想在屏幕上看到“约瑟夫”和“查尔斯” 第二。

您在想什么？

new Vue({
	el:'#app',
  data:{
  	district:'-1',
    options:{
    	'District1':false,
    	'District2':false,
    	'District3':false
    },
  },
  methods:{
    getOptions(){
      axios.get('https://jsonplaceholder.typicode.com/users',{district:this.district}).then(res=>
        this.options[this.district]=res.data)
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

  <div id="app">
    <select v-model="district" @change="getOptions()">
        <option value="-1" selected disabled hidden>choose a district</option>
       <option value="District1">District 1</option>
       <option value="District2">District 2</option>
       <option value="District3">District 3</option>
    </select>
      <br><br>
    <select  v-if="options[district]">
       <option v-for="option in options[district]">{{option.name}}</option>
    </select>
  </div>

编辑：

在您发表评论后，我编辑了此答案，因此现在它可以从某些api获取数据。

要从数据库获取选项，首先必须为您的应用程序创建一个api，然后当请求从vue客户端发出时-服务器将从数据库中检索行，并根据参数进行一些计算您发送了请求，并带回了一个json数据数组。

（我现在不会介绍服务器端-完全是题外话。但是您可以轻松地在Google上搜索“ laravel json响应”）

在此代码段中，我使用了一些示例json api，只是向您展示了它如何在客户端完成：

我使用v-if导致第二个选择的后期渲染。只有在我通过axios（在现代js框架中用于发出ajax请求的非常常见的npm软件包）获得选项后，它才会呈现。

im还为第一个选择的change事件注册了一个事件侦听器-发出我的ajax请求并在每次更改权限时填充我的选项（我使用默认选项以避免不必要的请求）

如何使用Vue.js在html中制作<select>标签仅显示一些数据，具体取决于另一个</select>标签

2 个答案: