मैं Nuxt के साथ एक सर्वर-साइड सॉर्ट करने योग्य तालिका बनाने का प्रयास कर रहा हूं, और मैं अपने Vue data में डिफ़ॉल्ट सॉर्ट कॉलम और दिशा निर्दिष्ट करने में सक्षम होना चाहता हूं, और इसे मेरे asyncData में एक्सेस करना चाहता हूं। समारोह। कुछ इस तरह:

<script>
export default {
  async asyncData ({ $axios, params }) {
    const things = await $axios.$get(`/api/things`, {
      params: {
        sort_column: this.sortColumn,
        sort_ascending: this.sortAscending,
      }
    });
    return { things };
  },
  data () {
    return {
      sortColumn: 'created_at',
      sortAscending: true
    }
  },
  // ...
}
</script>

लेकिन ऐसा प्रतीत होता है कि data अभी तक उपलब्ध नहीं है, क्योंकि this.sortColumn और this.sortAscending परिभाषित नहीं हैं। मैं इन डिफ़ॉल्ट तक कैसे पहुंच सकता हूं जब asyncData चलता है, जबकि उपयोगकर्ता द्वारा पेज के साथ इंटरैक्ट करने पर उन्हें बदलने की अनुमति भी देता है। (वैकल्पिक रूप से, इसकी संरचना करने का एक बेहतर तरीका क्या है?)

नोट: यह प्रश्न यहां पूछा गया था, लेकिन स्वीकृत उत्तर इसके लिए प्रासंगिक नहीं है यह स्थिति।

4
Collin Allen 17 अक्टूबर 2018, 02:15

1 उत्तर

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

आप इसे बस asyncData में वापस कर सकते हैं। उदा. कुछ इस तरह:

async asyncData ({ $axios, params }) {
    const sortColumn = 'created_at'
    const sortAscending = true
    const things = await $axios.$get(`/api/things`, {
      params: {
        sort_column: sortColumn,
        sort_ascending: this.sortAscending,
      }
    });
    return { things, sortColumn, sortAscending };
  },

और यह वैसा ही व्यवहार करेगा जैसा आप चाहते हैं।

1
Aldarund 17 अक्टूबर 2018, 00:04