ตัวดำเนินการแบบ Ternary ของ Vuejs / แบบมีเงื่อนไขไม่ทำงานในรูปแบบ v-bind

ฉันมีพฤติกรรมแปลก ๆ บางอย่างที่พยายามใช้เงื่อนไขสำหรับสไตล์ของไอเท็มใน Vuejs

ฉันเคยเห็น S.O. โพสต์เกี่ยวกับวิธีการนำไตรภาคไปใช้ ผ่านทางทั้งสตริงที่สอดแทรกหรือออบเจ็กต์สไตล์ที่คำนวณ ฉันได้ลองทั้งสองแล้ว แต่ก็ไม่ได้ผลอย่างถูกต้อง

รับ div นี้:

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

ฉันจะใช้สไตล์นี้:

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;
    },
  }

สิ่งนี้ควรทำให้แต่ละรายการเหล่านี้ลดขนาดลง (เนื่องจากมาตราส่วน (0) ในคุณสมบัติความทึบ) แต่แอตทริบิวต์ style จะไม่แสดงผลเลย ฉันยังลองใช้อินไลน์แบบไตรภาคบนเสาสไตล์ (เนื่องจากสเกลนั้นเป็นสิ่งเดียวที่เปลี่ยนแปลงระหว่างคุณสมบัติทั้งสอง:

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

ฉันพลาดอะไรไป?


javascript vue.js conditional-statements css ternary-operator
person mheavers    schedule 27.08.2019    source แหล่งที่มา

คำตอบ (4)


arrow_upward
3
arrow_downward

การเชื่อมโยงสไตล์คาดว่าจะมีวัตถุ โดยการใส่ ternary ในวงเล็บเหลี่ยม คุณกำลังส่งผ่านอาร์เรย์ที่มีอ็อบเจ็กต์ ซึ่งไม่จำเป็น นอกจากนี้ คุณกำลังพันวัตถุที่ส่งคืนไว้ที่ด้านใดด้านหนึ่งของไตรภาคในวงเล็บ ซึ่งจะซ้อนวัตถุเหล่านั้นลงไปอีก การถอดวงเล็บเหล่านั้นออกจะทำให้สามารถจัดการวัตถุที่ส่งคืนได้อย่างถูกต้อง:

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

ตามหมายเหตุด้านข้าง หากคุณเพิ่มตัวแปรที่มีออบเจ็กต์ให้กับออบเจ็กต์อื่นโดยไม่ระบุชื่อคุณสมบัติ ชื่อตัวแปรจะถูกใช้เป็นชื่อคุณสมบัติ

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

ลองใช้เงื่อนไขใน 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

ควรใช้งานได้หากคุณใช้ ตัวดำเนินการสเปรด แบบนี้:

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

arrow_upward
0
arrow_downward

วิธีแก้ปัญหาของคุณใช้งานไม่ได้เนื่องจากคุณสร้างวงเล็บปีกกาคู่

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

คุณสามารถมีอาร์เรย์ที่มี styleObjects หรือเฉพาะ styleObject เท่านั้น

E.g.

  :style="[ { color: 'blue' } ]"
  :style="{ color: 'blue' }"
person MarcRo    schedule 27.08.2019
comment
น่าสนใจ ฉันไม่รู้ว่ามันจะรวมพวกมันเข้าด้วยกันหากคุณจัดหาอาร์เรย์ของวัตถุ... ขอบคุณสำหรับสิ่งนั้น ที่อาจมีประโยชน์ในบางจุด :) ฉันจะอัปเดตคำตอบของฉัน - person LightBender; 27.08.2019
comment
ใช่แล้ว พวกมันรวมเข้ากับคุณสมบัติของวัตถุทางด้านขวา แทนที่วัตถุทางด้านซ้าย - person MarcRo; 27.08.2019