Operator Ternary Vuejs/Bersyarat Tidak Berfungsi dalam gaya v-bind

Saya mendapatkan perilaku aneh saat mencoba menerapkan kondisi untuk gaya item di Vuejs.

Saya telah melihat S.O. posting tentang cara mengimplementasikan ternary, melalui string yang diinterpolasi atau objek gaya yang dihitung. Saya sudah mencoba keduanya tetapi tidak ada yang berfungsi dengan baik.

Mengingat div ini:

<div 
    :class="{'radar__container':true,'inactive':inactive}"
    :style= "[inactive ? {getStyleRadarContainerInactive} : {getStyleRadarContainer}]"
  >

Saya akan menerapkan gaya ini:

computed: {
    getStyleRadarContainer: function(){

        let styleRadarContainer = {
            left: this.radarItem.posX*100 + '%', 
            top: this.radarItem.posY*100 + '%',
            transform: 'translate(-50%,-50%) scale(' + this.radarItem.scale + ')',
            opacity: this.radarItem.opacity,
        }

        return styleRadarContainer;
    },
    getStyleRadarContainerInactive: function(){

        let styleRadarContainerInactive= {
            left: this.radarItem.posX*100 + '%', 
            top: this.radarItem.posY*100 + '%',
            transform: 'translate(-50%,-50%) scale(0)',
            opacity: this.radarItem.opacity,
        }

        return styleRadarContainerInactive;
    },
  }

Ini akan membuat masing-masing item ini diperkecil (karena skala(0) di properti opacity), tetapi atribut style tidak dirender sama sekali. Saya juga mencoba ternary inline pada style prop (karena skala itu adalah satu-satunya hal yang berubah di antara dua properti:

transform: 'translate(-50%,-50%) ' + inactive ? 'scale(' + radarItem.scale + ')' : 'scale(0)',

Apa yang saya lewatkan?


javascript vue.js conditional-statements css ternary-operator
person mheavers    schedule 27.08.2019    source sumber

Jawaban (4)


arrow_upward
3
arrow_downward

Pengikatan gaya mengharapkan suatu objek. Dengan membungkus ternary dalam tanda kurung siku, Anda meneruskan array yang berisi objek, yang sebenarnya tidak diperlukan. Selain itu, Anda membungkus objek yang dikembalikan di kedua sisi ternary dalam tanda kurung, yang kemudian akan menyusunnya lebih lanjut. Menghapus tanda kurung tersebut akan membuat objek yang dikembalikan dapat ditangani dengan benar:

<div 
    :class="{'radar__container':true,'inactive':inactive}"
    :style= "inactive ? getStyleRadarContainerInactive : getStyleRadarContainer"
  >

Sebagai catatan tambahan, jika Anda menambahkan variabel yang berisi objek ke objek lain tanpa menentukan nama properti, nama variabel tersebut digunakan sebagai nama properti.

var myObject = {
  property: 'value'
};

$('#output').html(JSON.stringify({myObject}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="output"></div>

person LightBender    schedule 27.08.2019

arrow_upward
1
arrow_downward

coba gunakan kondisi dalam V-bind:style

v-bind:style= "[condition ? {style_A} : {style_B}]"

https://vuejs.org/v2/guide/class-and-style.html

person Deepu Reghunath    schedule 27.08.2019

arrow_upward
1
arrow_downward

Ini akan berfungsi jika Anda menggunakan operator penyebaran seperti ini:

:style= "[inactive ? {...getStyleRadarContainerInactive} : {...getStyleRadarContainer}]"
person Christian Carrillo    schedule 27.08.2019

arrow_upward
0
arrow_downward

Solusi Anda tidak berhasil karena Anda membuat tanda kurung kurawal ganda

  :style="[{ obj: { styleObject }}]" // This won't work

Anda bisa memiliki array yang berisi styleObjects atau hanya styleObject.

E.g.

  :style="[ { color: 'blue' } ]"
  :style="{ color: 'blue' }"
person MarcRo    schedule 27.08.2019
comment
Menarik, saya tidak tahu itu akan menggabungkannya jika Anda menyediakan berbagai objek... terima kasih untuk itu. itu bisa berguna di beberapa titik :) Saya akan memperbarui jawaban saya. - person LightBender; 27.08.2019
comment
Yup, mereka menggabungkan properti objek di sebelah kanan dan mengesampingkan properti di sebelah kiri - person MarcRo; 27.08.2019