तो मैं एपीआई के माध्यम से प्राप्त वस्तुओं के साथ डेटा तालिका को पॉप्युलेट कर रहा हूं और यह ठीक काम कर रहा है, लेकिन अगर मैं किसी भी फ़ील्ड को संपादित करना चाहता हूं तो यह काफी काम नहीं कर रहा है।

आइटम केवल तभी अपडेट होता है जब मैं मैन्युअल रूप से खोज या सॉर्ट करने जैसा कुछ करता हूं। (डेटा तालिका के अंदर)

जिन क्षेत्रों को मैं संशोधित करने का प्रयास कर रहा हूं वे item.tuning और item.url getTab() के माध्यम से हैं

<v-data-table 
class="tableElem"
:headers="headers"
:items="playlist"
:loading="loadingPlaylist"
:search="search"
:pagination.sync="pagination"
:rows-per-page-items="[15]"
hide-actions
>
<v-progress-linear slot="progress" color="purple" indeterminate></v-progress-linear>
<template slot="items" slot-scope="props">
  <td>{{ props.item.artist }}</td>
  <td class="text-xs-right">{{ props.item.track }}</td>
  <td class="text-xs-right">{{ props.item.tuning | tuning }}</td>
  <td class="text-xs-right">
    <v-btn 
    v-if="props.item.url" 
    depressed outline light 
    style="margin-top:1rem;margin-bottom:1rem;" 
    :href="props.item.url" 
    target="!blank">
      Tab
    </v-btn>
    <div class="text-xs-center" v-else-if="props.item.url == false">No tab :(</div>
    <v-btn 
    v-else 
    depressed outline light 
    style="margin-top:1rem;margin-bottom:1rem;" 
    v-on:click="getTab(props.item.artist, props.item.track, props.item)">
      Get Tab
    </v-btn>
  </td>
</template>
<v-alert slot="no-results" :value="true" style="color:black;" icon="warning">
  Your search for "{{ search }}" found no results.
</v-alert>
</v-data-table>

तरीके:

getTab(artist, track, item) {
  //const tabURL = "https://stark-beyond-77127.herokuapp.com/spotify/gettab";
  let itemIndex = this.playlist.indexOf(item)
  const tabURL = "http://localhost:5000/spotify/gettab";
  const tabJSON = {
    artist: artist,
    track: track
  };
  axios.post(tabURL, tabJSON).then(response => {
    let tuning = response.data[0].tuning;
    let url = response.data[0].url;
    this.playlist[itemIndex] = { ...this.playlist[itemIndex], ...{ tuning: tuning, url: url } };
    console.log(this.playlist[itemIndex]);
  });
}

मेरा अनुमान है कि मुझे गणना का उपयोग करना होगा: या घड़ी: लेकिन यह नहीं पता कि इसे कैसे कार्यान्वित किया जाए। धन्यवाद

5
breke 2 अक्टूबर 2018, 20:34

4 जवाब

सबसे बढ़िया उत्तर
let itemIndex = this.playlist.indexOf(item)
let editedItem = { ...this.playlist[itemIndex], ...{ tuning: tuning, url: url } };
this.playlist.splice(itemIndex, 1, editedItem)

समस्या को ठीक करता है। मुझे लगता है कि स्प्लिस एक डोम रीफ्रेश बल देता है जो सीधे संपादन सरणी नहीं करता था।

14
breke 3 अक्टूबर 2018, 12:33

अगर किसी को भी इस समस्या का सामना करना पड़ रहा है, तो मैं अपना समाधान साझा करना चाहता हूं।

समाधान JSON सरणी में नई विशेषता जोड़ने से पहले null को विशेषता घोषित करता है।

ओपी मामले में,

const tabJSON = {
    artist: artist,
    track: track
    tuning: null,
    url: null
};

यह मेरी समस्या है, जेसन ऑब्जेक्ट की सरणी में जोड़ा गया गुण तब तक नहीं दिखता जब तक सॉर्ट बटन क्लिक नहीं किया जाता है।

problem gif

मेरे मामले में, मुझे फायरस्टोर से डेटा पुनर्प्राप्त करने और सरणी में विशेषताओं को जोड़ने की आवश्यकता है।

db.collection("checkout")
  .get()
  .then(querySnapshot => {
    querySnapshot.forEach(doc => {
      const data = {

        book_did: doc.data().book_did,
        borrowed_date: doc.data().borrowed_date.toDate(),
        due_date: doc.data().due_date.toDate(),

        book_title: null, // solution
        returned_date: null, // solution
        days_late: null // solution
      };
      this.checkout.push(data);
    });

    // modified this.checkout array here:
    Object.keys(this.checkout).forEach(key => {
      db.collection("books")
        .doc(this.checkout[key].book_did)
        .get()
        .then(snapshot => {
          this.checkout[key].book_title = snapshot.data().title;
        });
    });
  });
1
wei 23 जुलाई 2019, 13:57

जब आप सीधे इंडेक्स सेट करते हैं या लंबाई बदलते हैं तो Vue सरणी में परिवर्तन नहीं उठा सकता है।

लेख देखें: Vuejs में ऐरे और ऑब्जेक्ट को अपडेट करें .

इसके बजाय आप इसका उपयोग कर सकते हैं:

Vue.set(vm.items, indexOfItem, newValue)

Vm.items.splice(indexOfItem, 1, newValue)

1
Chris Herbst 6 अगस्त 2020, 13:42

मेरे मामले में, अप्रत्याशित व्यवहार v-for कुंजी से आता है। मेरा डेटा कुंजी के रूप में "id" का उपयोग नहीं कर रहा है। दस्तावेज़ों को फिर से पढ़ने के बाद, मुझे एहसास हुआ कि Vuetify आइटम के लिए डिफ़ॉल्ट कुंजी के रूप में "id" का उपयोग कर रहा है।

समाधान यह है कि मुझे वी-डेटा-टेबल के लिए item-key प्रोप निर्दिष्ट करना होगा ताकि यह अपेक्षा के अनुरूप व्यवहार करे।

उदाहरण:

data: () => ({
  playlist: [
    { key: 1, name: 'Foo' },
    { key: 2, name: 'Bar' },
  ],
}),

item-key का प्रयोग करें:

<v-data-table :headers="headers" :items="playlist" item-key="key">
0
Mgs M Rizqi Fadhlurrahman 12 मई 2020, 16:45