Vuejs v-model Optional Chaining

trsherlock 854 gün önce

512 defa görüntülendi ve 1 kişi tarafından değerlendirildi

<input type="text" v-model="invoices?.[0]?.invoiceID">
<input type="text" v-model="invoices?.[0]?.date">
<input type="text" v-model="invoices?.[0]?.userID">

Herkese merhaba. Vue js ile Optional Chaining nasıl kullanabilirim?
Xml dosyalarından veri çekiyorum.
Dizi boş olduğu zaman inputlar da boş olsun.

vuejs

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (5)

trsherlock

851 gün önce

Neyse internette bir örnek gördüm iş görür gibi. Metod kullanarak çözmüş.

<div id="ebelge">
        <div class="h-[100vh] bg-gradient-to-b from-[#1fa2ff] to-[#12d8fa] to-[#a6ffcb]">
            <div>
                <input type="text" v-model="optianal('evrakNo')">
                <input type="text" v-model="optianal('aliciVKN')">
                <input type="file" multiple accept=".xml" @change="parseXML" />
            </div>
        </div>
    </div>
    <script>
        const newVue = new Vue({
            el: '#ebelge',
            data: {
                index: 0,
                invoices: [
                    {
                        evrakNo: "1"
                    }
                ]
            },
            methods: {
                optianal(e) {
                    switch (e) {
                        case "evrakNo":
                            return this.invoices?.[this.index]?.evrakNo
                            break;
                        case "aliciVKN":
                            return this.invoices?.[this.index]?.aliciVKN
                            break;
                        default:
                            break;
                    }
                },
                parseXML(e) {
                    this.invoices = [];
                    this.index = 0;
                    const $xmlFiles = e.target.files;
                    for (let i of $xmlFiles) {
                        $.get(
                            URL.createObjectURL(i),
                            (xml) => {
                                this.invoices.push($.fn.earsivXML(xml, i.name));
                            },
                            "xml"
                        );
                    }
                }
            }
        })

    </script>

#011740

trsherlock

851 gün önce

Herkese ilgisi ve yardımları için teşekkür ederim.
Gökhan Kandemir'in videolarından izlediğim kadarı ile kavramaya çalışıyorum.
Html sayfasına dahil ederek yapmak istiyordum.
Şimdi web sitesine baktığım da benim kullandığımdan farklı bir kullanım mevcut.
Sizin önerilerinize benziyor. Ama jsfiddle örneklerine baktım orada denememde çalışmadı ya da beceremedim.

Örnek: https://jsfiddle.net/TrSherlock/msayL02n/8/

Sanırsam bir şeyi gözden kaçırıyorum?
Çok hakim olmadığım bir konu.
For ve bir şey değiştiğinde her şeyin değişmesi hoşuma gitmişti.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="earsivXML.js"></script>
<div id="ebelge">
        <div class="h-[100vh] bg-gradient-to-b from-[#1fa2ff] to-[#12d8fa] to-[#a6ffcb]">
            <div>
                <input type="text" v-model="invoices?.[0]?.evrakNo">
                <input type="file" multiple accept=".xml" @change="parseXML" />
            </div>
        </div>
    </div>
    <script>
        const newVue = new Vue({
            el: '#ebelge',
            data: {
                index: 1,
                invoices: [
                    {
                        evrakNo: "1"
                    }
                ]
            },
            methods: {
                parseXML(e) {
                    this.invoices = [];
                    const $xmlFiles = e.target.files;
                    for (let i of $xmlFiles) {
                        $.get(
                            URL.createObjectURL(i),
                            (xml) => {
                                this.invoices.push($.fn.earsivXML(xml, i.name));
                            },
                            "xml"
                        );
                    }
                }
            }
        })

    </script>

#011739

qplot

851 gün önce

<template>
  <form>
    <input v-model="user?.name" type="text" />
  </form>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John',
      },
    };
  },
};
</script>

#011738

h4ckdr0

853 gün önce

<template>
  <div>
    <input type="text" v-model="invoices?.[0]?.invoiceID">
    <input type="text" v-model="invoices?.[0]?.date">
    <input type="text" v-model="invoices?.[0]?.userID">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        invoices: []
      }
    }
  }
</script>

Burada, invoices dizisi boş olduğunda invoiceID, date, ve userID inputlarında da boş değerler gösterilecektir. Optional Chaining (?.) operatörü, bir nesnenin null veya undefined olduğunu kontrol ederek, sorgulama işlemini devam ettirir. Bu sayede kodunuzda hata almamak için null ve undefined kontrollerine gerek kalmadan sorgulama işlemlerini yapabilirsiniz.

#011727

mubado

853 gün önce

invoices?.[0]?.invoiceID ?? ''

#011725