javascript - Nilai lalai apabila pembolehubah dalam templat vue tidak benar

Question

Penerangan masalah:

<template>
    <p>
        <section>{{x.a}}</section>
        <section>{{x.b}}</section>
        <section>{{x.c}}</section>
    </p>
</template>
<script>
    export default {
        name:"xx",
        data(){
            return {
                x:{
                    a:"foo",
                    b:null,
                    c:null
                }
            }
        }
    }
</script>

Diberikan sebagai

<p>
    <section>foo</section>
    <section></section>
    <section></section>
</p>

Kesan yang diingini:
Saya harap akan ada nilai lalai global apabila pembolehubah tidak benar, seperti "--"

Percubaan saya

<template>
    <p>
        <section>{{x.a||"--"}}</section>
        <section>{{x.b||"--"}}</section>
        <section>{{x.c||"--"}}</section>
    </p>
</template>

Walaupun ini boleh mencapai kesan, ia terlalu memenatkan. Setiap satu perlu ditulis. Cuma nak malas, saya ubah suai

<template>
    <p>
        <section>{{showX("a")}}</section>
        <section>{{showX("b")}}</section>
        <section>{{showX("c")}}</section>
    </p>
</template>
<script>
    export default {
        name:"xx",
        data(){
            return {
                x:{
                    a:"foo",
                    b:null,
                    c:null
                }
            }
        },
        methods:{
            showX:function(key){
                const value = this.x[key];
                return !!value?value:"--";
            }
        }
    }
</script>

Bantuan yang saya mahukan:
Namun cara penulisan di atas masih dirasakan tidak cukup selesa. Adakah terdapat sebarang cara saya masih boleh menulis <section>{{x.a}}</section> apabila nilainya tidak benar, ia akan dipaparkan sebagai "--" dalam templat, dengan syarat data asal x ialah tidak tercemar

Answer 1

Anda boleh menggunakan penapis untuk mencapai kesan ini:

new Vue({
  data: {
    message: ''
  },
  
  filters: {
    e (str) { return str || '--' }
  }
})

{{ message | e }}

Jika anda masih merasakan ia terlalu menyusahkan, anda boleh menggunakan lebih banyak kaedah teknologi hitam:

var _s = Vue.prototype._s

Vue.prototype._s = function (s) {
  return _s.call(this, s || '--')
}

Jelaskan, _s ialah sifat dalaman Vue Setiap nod teks dalam templat akan diproses dengan kaedah ini, dan nilai pulangan akan diberikan Memandangkan ia adalah sifat dalaman, kestabilan tidak dapat dijamin apabila versi ini dikemas kini harus diperhatikan. Demo dilampirkan:
https://codepen.io/cool_zjy/p...

Answer 2

Anda boleh menggunakan operator ternary,

{{x.a?x.a:'--'}}

Ini bersamaan dengan pernyataan penghakiman jika,

Answer 3

Sila berikan saya pendapat peribadi anda tentang tempat untuk mengubah suai nilai x dalam data:

1. Ia diubah suai semasa mencipta, maka ia cukup untuk terus menggunakan operasi litar pintas pertama yang anda gunakan di tempat yang diubah suai

2. Jika anda memulakan paparan dan kemudian mengubah suainya, kemudian tetapkan nilai awal anda kepada '--', bukan ok?