Javascript VueJS |如何在v-for列表中具有不同的选择值

我正在努力使我们当地俱乐部的国际象棋比赛的格式变得动态，我使用VueJS。其想法是，提交给给定配对的结果会自动更新排名。整个配对列表通过v-for列表加载。但是，游戏的每个更新结果都会出现在所有选择菜单中，如下所示：

有趣的是，仅播放器1和播放器2、播放器3和播放器5等的值会根据我设置为1-0、0-1的½-½的下拉列表而变化。我尝试将

：key=“index”

或

：name=“result”

添加到选择菜单，将

：selected=“true”

添加到空选项，但没有任何效果。我很想更改selectv-model的名称，但我使用“result”来更新updateAfterGame方法。有人知道我做错了什么，以及我如何使每一行都独一无二吗？这很可能只是一个JavaScript问题，我不确定

HTML

    <table>
      <tr>
        <th>white</th>
        <th>black</th>
        <th>result</th>
      </tr>
      <tr v-for="(game, index) in pairings">
        <td>{{game.white}}</td>
        <td>- {{game.black}}</td>
        <td><select v-model="result" @change="updateAfterGame(game.r_white, result, game.r_black, 1-result)">
              <option value="">    *  </option>
              <option value="1"> 1 - 0</option>
              <option value=".5">½ - ½</option>
              <option value="0"> 0 - 1</option>
        </select></td>
      </tr>
    </table>

<table>
  <tr>
    <th>white</th>
    <th>black</th>
    <th>result</th>
  </tr>
  <tr v-for="(game, index) in pairings" :key="index">
    <td>{{game.white}}</td>
    <td>- {{game.black}}</td>
    <td><select v-model="game.result">
          <option value="">    *  </option>
          <option value="1"> 1 - 0</option>
          <option value=".5">½ - ½</option>
          <option value="0"> 0 - 1</option>
    </select></td>
  </tr>
</table>

亲切问候,

---

伯特

如果将所有游戏结果保存在一个变量中，很明显，所有行都将是相同的。为了单独保存每个游戏结果，您应该将结果移动到配对数组中，如下所示

Javascript

    var app = new Vue({
      el: '#app',
      data: {
        pairings: [
          {white: 'Player 1', r_white: 0, black: 'Player 2', r_black: 1},
          {white: 'Player 3', r_white: 2, black: 'Player 5', r_black: 4},`
        ]
      },
      methods: {
        updateAfterGame: function (no1, result1, no2, result2) {
          // changes the standings; irrelevant for the question
        }
      }
    }

var app = new Vue({
  el: '#app',
  data: {
    pairings: [
      {white: 'Player 1', r_white: 0, black: 'Player 2', r_black: 1, result: "0"},
      {white: 'Player 3', r_white: 2, black: 'Player 5', r_black: 4, result: "0"},`
    ]
  }
}

然后你可以这样绑定你的结果

HTML

    <table>
      <tr>
        <th>white</th>
        <th>black</th>
        <th>result</th>
      </tr>
      <tr v-for="(game, index) in pairings">
        <td>{{game.white}}</td>
        <td>- {{game.black}}</td>
        <td><select v-model="result" @change="updateAfterGame(game.r_white, result, game.r_black, 1-result)">
              <option value="">    *  </option>
              <option value="1"> 1 - 0</option>
              <option value=".5">½ - ½</option>
              <option value="0"> 0 - 1</option>
        </select></td>
      </tr>
    </table>

<table>
  <tr>
    <th>white</th>
    <th>black</th>
    <th>result</th>
  </tr>
  <tr v-for="(game, index) in pairings" :key="index">
    <td>{{game.white}}</td>
    <td>- {{game.black}}</td>
    <td><select v-model="game.result">
          <option value="">    *  </option>
          <option value="1"> 1 - 0</option>
          <option value=".5">½ - ½</option>
          <option value="0"> 0 - 1</option>
    </select></td>
  </tr>
</table>

白色
黑色
结果
{{game.white}
-{{game.black}}
*  
1 - 0
½ - ½
0 - 1

---

此外，在实现v-for列表时，您应该始终包括key属性，通过该属性，vue知道必须更新哪些行

您是否尝试将最终结果放入数据数组中？像这样：

 pairings: [
        {
          white: "Player 1",
          r_white: 0,
          black: "Player 2",
          r_black: 1,
          finalResult: ""
        },
        {
          white: "Player 3",
          r_white: 2,
          black: "Player 5",
          r_black: 4,
          finalResult: ""
        }
      ]

并在v-model中指定，如v-model=“game.finalResult”

所以它是这样的：

白色
黑色
结果
{{game.white}
-{{game.black}}
*
1 - 0
½ - ½
0 - 1
导出默认值{
名称：“应用程序”，
组件：{}，
数据：函数（）{
返回{
配对：[
{
白色：“玩家1”，
鲁怀特：0，
黑色：“玩家2”，
布莱克：1，
最后结果：“
},
{
白色：“玩家3”，
怀特：2，
黑色：“玩家5”，
r_black:4，
最后结果：“
}
]
};
},
方法：{
updateAfterGame:函数（No 1，result1，No 2，result2）{
//改变排名；与问题无关
}
}
};

哦，我真傻。我实际上在数组中有一个“结果”，当它是静态的。谢谢你帮助我！哦，我真傻。我实际上在数组中有一个“结果”，当它是静态的。还有一个关于key属性的有用提示，即使没有它也可以进行黑客攻击。谢谢你帮助我！