मेरे पास एक शॉपिंग कार्ट/ऑर्डर सूची है जिसे मैं एक सरणी से बांधता हूं जो ठीक काम करता है।

मैंने हाल ही में सरणी में जोड़े गए प्रत्येक आइटम के लिए एक पंक्ति संख्या और एक बटन पंक्ति भी जोड़ी है। समस्या यह है कि मैं उन्हें एक मौजूदा पंक्ति के लिए बाध्य करता हूं जैसे कि

<div id="table">
    <table class="table table-sm table-bordered table-striped">
      <thead class="thead-dark">
        <tr>
          <th scope="col">#</th>
          <th scope="col">Product</th>
          <th scope="col">Type</th>
          <th scope="col">Attribute</th>
          <th scope="col">Height</th>
          <th scope="col">Width</th>
          <th scope="col">Price</th>
          <th width="1%" scope="col">Remove</th>
        </tr>
      </thead>
        <tbody>
          <tr v-for="(item, index) in table_products">
            <td>{{ index +1 }}</td>
            <td>{{ item.product }}</td>
            <td>{{ item.type }}</td>
            <td>{{ item.attribute }}</td>
            <td>{{ item.height }}</td>
            <td>{{ item.width }}</td>
            <td>{{ item.price }}</td>
            <td><button class="btn btn-danger" @click="deleteRow(index)">X</button></td>
          </tr> 
        </tbody>
      </table>
    </div>
  </div>

मुझे कभी कोई समस्या नहीं हुई क्योंकि बाध्य आइटम मान शून्य थे इसलिए पंक्ति कभी नहीं बनाई गई थी। लेकिन अब इंडेक्स और बटन टेबल की पहली पंक्ति बनाते हैं।

क्या कोई तरीका है कि मैं पेज लोड पर सरणी को साफ़ कर सकता हूं, या क्या मैं इस पर गलत तरीके से जा रहा हूं?

The table on page load

संपादित करें: संदर्भ के लिए मेरा Vue घटक जोड़ा गया

var table_products = new Vue ({
   el : '#table',
   data : {
     table_products : [{
    }]
   },
0
Corey O'Connor 19 नवम्बर 2020, 04:56

1 उत्तर

सबसे बढ़िया उत्तर

मैंने [] के बजाय table_products [{}] को इनिशियलाइज़ किया

प्रारंभिक से सरणी में इसकी एक खाली वस्तु थी, इसलिए इसमें एक तत्व था। इसके बजाय एक खाली सरणी शुरू करने से यह समस्या ठीक हो गई क्योंकि इसमें कोई तत्व नहीं था।

टिप्पणियों में फिल को धन्यवाद Thanks

0
Corey O'Connor 5 पद 2020, 16:45