Question

因此，基本上，我有products数组和prices数组，其中有一个product_id数组（并且在该数组中有price和priceAfterDiscount数据）。问题是我无法使用v-bind传递此数据。（请参见：price =“`prices.product _ $ {product.id} .price`”）。 prices.product_8.price字符串，而不是进入数组。

先谢谢了。代码在下面

React.js
import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      items:[],
      isloading:false,
     }
  }
  componentDidMount() {

      fetch('http:localhost:5000/api/hello')
      .then((response)=>{
        return response.json();
      })
      .then((data)=>{
        this.setState({
          items:data
        })
      })
  }
  render() { 
    var  isloading   = this.state;
    var items = this.state
    if(!isloading)
    {
      return(<div>Loading...</div>)
    }
    
    if(items)
    {
      return(
        <div>
          {
            this.state.items.map((item, i)=>
                     
              <div>
              {
                (typeof(item.body)=='object')?
                <div> 
                  {
                    item.body.map((subrowdata,k)=>
                    <div>
                      {
                        (typeof(subrowdata.info)=='object')?
                        <div>
                          {subrowdata.last_updated}
                          </div>
                          :
                          null
                      }
                      </div>
                    )
                  }
                </div>
                :
                null
              }
              </div>
            )
          }
        </div>
      )
    }

  }
}

export default App;

Answer 1

我有点困惑？ prices现在是数组还是对象？我将假定对象是因为它的用法。在这种情况下，您可以使用索引运算符传递一个字符串，如下所示：

<ProductCard v-for="product in products.data"
  :product="product"
  :key="product.id"
  :userСurrency="userСurrency"
  :user-currency-code="userCurrencyCode" 
  :price="prices[`product_${product.id}`].price" />

在v-for中的v：bind中使用动态名称

1 个答案: