Question

我已经使用vue.js从JSON数据动态创建输入字段。我要为他们提供动态v模型的问题

我在做什么

new Vue({
  el: '#app',
  data() {
    return {
      totalAmt: 500,
      paymentMode: [{
        "PAYMENTCODE": "SW",
        "PAYMENTNAME": "Swiggy"
      }, {
        "PAYMENTCODE": "BB",
        "PAYMENTNAME": "uber Eats"
      }, {
        "PAYMENTCODE": "WE",
        "PAYMENTNAME": "Zomato"
      }]
    }
  },
  computed: {
    balAmt() {
      return 0 - this.totalAmt
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <label>Total Amt</label>
    <input type="text" v-model="totalAmt">
  </div>
  <div v-for="mode in paymentMode" :key="mode.PAYMENTCODE" class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
    <label>{{mode.PAYMENTNAME}}</label>
    <input type="text">
  </div>
  <div>
    <label>Bal Amt</label>
    <input type="text" :value="balAmt">
  </div>
</div>

我想做的是：

两个字段Total Amt和Bal Amt我总共有一些值，在Bal Amt中，我有相同的总amt值，但是像-Total Amt=500然后{{ 1}}就是页面加载

现在有一些动态输入字段，这里有3个，因此当我在Bal-Amt=-500中输入一个假设50时，就像在input field中一样，我想做Swiggy即{{1} }

对于静态字段，我可以轻松地做到这一点，但是在这里我拥有动态字段，我该如何做到这一点。

Answer 1

类似于import time from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support import expected_conditions as EC from selenium.webdriver.support.ui import WebDriverWait url = 'https://shopee.com.my/search?keyword=mattress' driver = webdriver.Chrome(executable_path=r'E:/users/Asashin/Desktop/Bots/others/chromedriver.exe') driver.get(url) # select language WebDriverWait(driver,5).until(EC.element_to_be_clickable((By.XPATH,'//div[@class="language-selection__list"]/button'))).click() # scroll few times to load all items for x in range(10): driver.execute_script("window.scrollBy(0,300)") time.sleep(0.1) # get all links (without clicking) which contains div element with class `_1gkBDw _2O43P5` alllinks = WebDriverWait(driver,15).until(EC.visibility_of_all_elements_located((By.XPATH,"//div[@class='col-xs-2-4 shopee-search-item-result__item'][.//div[@class='_1gkBDw _2O43P5']]//a[@data-sqe='link']"))) for link in alllinks: #Print the href value of the anchor tag print(link.get_attribute("href"))，向每个输入添加totalAmt并将其设置为v-model。然后在"mode.Amount"内，计算每个输入的总和，并从balAmt

中减去

totalAmt

new Vue({
  el: '#app',
  data() {
    return {
      totalAmt: 500,
      paymentMode: [{
        "PAYMENTCODE": "SW",
        "PAYMENTNAME": "Swiggy"
      }, {
        "PAYMENTCODE": "BB",
        "PAYMENTNAME": "uber Eats"
      }, {
        "PAYMENTCODE": "WE",
        "PAYMENTNAME": "Zomato"
      }]
    }
  },
  computed: {
    balAmt() {
      // sum of inputs of paymentMode
      const sum = this.paymentMode.reduce((a, b) => a + (+b.Amount || 0), 0);
      return sum - this.totalAmt;
    }
  }
})

Answer 2

new Vue({
  el: '#app',
  data() {
    return {
      totalAmt: 500,
      paymentMode: [{
        "PAYMENTCODE": "SW",
        "PAYMENTNAME": "Swiggy",
        amount: 0
      }, {
        "PAYMENTCODE": "BB",
        "PAYMENTNAME": "uber Eats",
        amount: 0,
      }, {
        "PAYMENTCODE": "WE",
        "PAYMENTNAME": "Zomato",
        amount: 0
      }]
    }
  },
  computed: {
    otherAmt() {
      let amt = 0
      this.paymentMode.forEach(mode => {
        amt += Number(mode.amount)
      })
      return amt
    },
    balAmt() {
      return 0 - (this.totalAmt - this.otherAmt)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <label>Total Amt</label>
    <input type="text" v-model="totalAmt">
  </div>
  <div v-for="mode in paymentMode" :key="mode.PAYMENTCODE" class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
    <label>{{mode.PAYMENTNAME}}</label>
    <input type="text" v-model="mode.amount">
  </div>
  <div>
    <label>Bal Amt</label>
    <input type="text" :value="balAmt">
  </div>
</div>

如何为元素提供V模型

2 个答案: