javascript - 如何获取 v-for 的索引值作为 Vue 中计算属性函数的参数？

Question

我想将 v-for 的索引值（在路径标记中）作为stateData(index)Vue 计算属性中定义的函数中的参数。我试图这样做，v-model="stateData[index]"但控制台框显示路径标记不支持 v-model 的错误（您可以通过运行代码段来查看）。

有人有什么主意吗？

  var app = new Vue({
      el: "#app",
      data(){
        return {
                statesJson: null,
                }
            },
        methods:{
          axiosCall() {
               axios.all([axios.get('https://raw.githubusercontent.com/smlab-niser/CRiAPGraph/master/India.json')])
              .then(axios.spread((user1) => (
               this.statesJson=user1.data
      )))
              .catch(error => {
               console.log(error)
      })
    },    
        },
        computed: {
        // Typical projection for showing all states scaled and positioned appropriately
        projection () {
          return d3.geoMercator().scale(900).translate([-1030, 700])
        },

        // Function for converting GPS coordinates into path coordinates
        pathGenerator () {
          return d3.geoPath().projection(this.projection)
        },
            // Combine the states GeoJSON with a rank-based gradient
        stateData (index) {
          return this.statesJson ? this.statesJson.features.map(feature => {
            return {
              feature
            }
          }):[]
        }
       },
      created:function(index){
            this.axiosCall();
          },
     })

   <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app">
            <div>
                <svg id="svg" ref="svg" height="600" width="510">
                    <path class="bar" v-for="(state, index) in stateData" v-model="stateData[index]"  :d="pathGenerator(state.feature)" :style="{
           stroke: 'darkslategray'
         }">
                    </path>
                </svg>
            </div>
         </div>

标签： javascripthtmlvue.js

Answer 1

请参阅下面有关如何在 for 循环中使用对象的示例。我已经简化了您的代码，我认为不需要使用索引，如下所示。

我删除了该statesData函数，因为它基本上将数组映射到数组，因此您可以通过statesJson.features立即访问v-for.

我比在新函数中使用statefrom作为输入。在该函数中，它位于Vue 组件的属性中，您可以按等级计算梯度。使用该对象，我们现在可以简单地立即访问，无需使用.v-forcalcFillmethodsstatestate.rankindex

这只是一个示例，表明有时最好保持对象原样并将这些对象直接用作方法参数。

当您运行代码片段时，您会看到每个状态现在都按其等级进行了颜色编码。

var app = new Vue({
      el: "#app",
      data(){
        return {
                statesJson: null,
                }
            },
        methods:{
          axiosCall() {
               axios.all([axios.get('https://raw.githubusercontent.com/smlab-niser/CRiAPGraph/master/India.json')])
              .then(axios.spread((user1) => (
                this.statesJson=user1.data
               )))
              .catch(error => {
               console.log(error)
              })
          },
          calcFill(state) { // Here you can do your rank based gradient
            let l = this.statesJson.features.length
            let rank = state.rank
            let num = (rank / l) * 255 // Calculate color code
            return 'rgb(' + num + ', ' + num + ', ' + num + ')'
          }
        },
        computed: {
          // Typical projection for showing all states scaled and positioned appropriately
          projection () {
            return d3.geoMercator().scale(900).translate([-1030, 700])
          },

          // Function for converting GPS coordinates into path coordinates
          pathGenerator () {
            return d3.geoPath().projection(this.projection)
          }
       },
      created:function(index){
            this.axiosCall();
          },
     })

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app">
            <!-- Only show if statesJson is loaded -->
            <div v-if="statesJson">
                <svg id="svg" ref="svg" height="600" width="510">
                    <!-- Loop directly on statesJson, keeping the object -->
                    <path class="bar" v-for="(state, index) in statesJson.features"  :d="pathGenerator(state)" :style="{
           stroke: 'darkslategray', fill: calcFill(state)
         }">
                    </path>
                </svg>
            </div>
         </div>