沒有 v-model 的 v-select 更新 var

Question

因為我在循環中使用 v-select 並且我需要標記每個循環迭代。 我希望能夠將選定的值添加到數組中，以檢查該值是否存在，然后添加或更改它，如下所示：

             <v-card-text>
                <ul>
                  <li v-for="ap in ['1','2','3']" :key="app">
                    <v-select
                      :items="findelem(appi)"
                      item-text="number"
                      item-value="number"
                     @input="check_update_array(_mark_ , _VALUE_)"
                    ></v-select>
                  </li>
                </ul>
              </v-card-text>
            </v-card>

並使用 check_update_array( mark , VALUE ) 作為檢查和更新數組的方法

這可能嗎？

編輯：

我將嘗試更明確，我想做一個 v-for 並為每個選擇迭代一個數組，我想將位置（迭代中的值）和所選值發送給函數：

<ul>
  <li v-for="ap in ARRAY">
    <v-select
...
    @input="check_update_array(ap, SELECTED_VALUE)"
></v-select>
    </li>
  </ul>

如果我做@input="check_update_array" SELECTED_VALUE 作為參數傳遞給函數，如果我做@input="check_update_array(ap)" 迭代中的位置被傳遞。

Answer 1

請看下面的代碼。 我以您的代碼為基礎。

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
  <v-app>
  <v-card>
    <v-card-text>
      <ul>
        <li v-for="(ap, index) in ['1','2','3']" :key="index">        
             <v-select
                    :items="findelem()"
                    item-text="number"
                    item-value="number"
                    label="My Select"
                    @input="check_update_array"
             ></v-select>
        </li>
      </ul>
      <p>
      {{ elements }}
      </p>
    </v-card-text>
    </v-card>
    </v-app>v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: function() {
        return {
            elements: []
        }
      },
      methods: {
        check_update_array(value) {
            this.elements.push(value);
        },
        findelem(appi) {
            return [{'number':'some element'},{'number':'another element'},{'number':'third element'}]
        }
      }
    })
  </script>
</body>

https://jsfiddle.net/ewatch/gn3eyxp2/

但是，關於 findelem 函數的“appi”參數和 check_update_array 函數的參數“ mark ”和“ VALUE ”的代碼中，我缺少一些上下文。

綁定到 @input 事件的函數已經接收選定的值作為參數（請參閱此處的文檔： https : //developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event ）。

我希望它有幫助。 請讓我知道，如果你有任何問題。

最好的問候，電子手表

Answer 2

假設您有一個名為“selected_array”的數據

data() {
    return {
      selected_array:[]
    }
}

現在在您的組件中，它應該是這樣的。

<v-card>
   <v-card-text>
      <ul>
          <li v-for="ap in ['1','2','3']" :key="app">
                    <v-select
                      :items="findelem(appi)"
                      item-text="number"
                      item-value="number"
                     @chanage="check_update_array"
                     return-object
                    ></v-select>
                  </li>
        </ul>
    </v-card-text>
</v-card>

然后在您的 check_update_array 函數中，您的代碼應如下所示。

check_update_array(data){
   let item_exist = false

   this.selected_array.forEach(item => { // check if value exists.
       if (item.value == data.value) {
          item.mark = data.mark
          item_exist = true
          return
       }
   })

  if (!item_exist) {              // if not existing then append
     this.selected_array.push(
         {mark:value, value:value}
     )
  }

 item_exist = false // reset value
}

只要確保您的findelem(appi) is an array of objects containing mark and value elements

沒有 v-model 的 v-select 更新 var

問題描述

2 個解決方案

解決方案1
2 已采納 2020-01-29 23:48:06

解決方案2
2 2020-01-30 02:07:05

沒有 v-model 的 v-select 更新 var

問題描述

2 個解決方案

解決方案1 2 已采納 2020-01-29 23:48:06

解決方案2 2 2020-01-30 02:07:05

解決方案1
2 已采納 2020-01-29 23:48:06

解決方案2
2 2020-01-30 02:07:05