VueJS - อินเทอร์เฟซปฏิกิริยา

VueJS มีตัวเลือกในการเพิ่มปฏิกิริยาให้กับคุณสมบัติซึ่งจะเพิ่มแบบไดนามิก พิจารณาว่าเราได้สร้างอินสแตนซ์ vue แล้วและจำเป็นต้องเพิ่มคุณสมบัตินาฬิกา สามารถทำได้ดังนี้ -

ตัวอย่าง

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ counter }}</p>
         <button @click = "counter++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1
            }
         });
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
         setTimeout(
            function(){
               vm.counter = 20;
            },2000
         );
      </script>
   </body>
</html>

มีตัวนับคุณสมบัติที่กำหนดเป็น 1 ในออบเจ็กต์ข้อมูล ตัวนับจะเพิ่มขึ้นเมื่อเราคลิกปุ่ม

สร้างอินสแตนซ์ Vue แล้ว ในการเพิ่มนาฬิกาเราต้องทำดังนี้ -

vm.$watch('counter', function(nval, oval) {
   alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});

เราต้องใช้ $ watch เพื่อเพิ่ม watch นอกอินสแตนซ์ vue มีการเพิ่มการแจ้งเตือนซึ่งแสดงการเปลี่ยนแปลงค่าสำหรับคุณสมบัติตัวนับ นอกจากนี้ยังมีการเพิ่มฟังก์ชันจับเวลาเช่น setTimeout ซึ่งตั้งค่าตัวนับเป็น 20

setTimeout(
   function(){
      vm.counter = 20;
   },2000
);

เมื่อใดก็ตามที่ตัวนับมีการเปลี่ยนแปลงการแจ้งเตือนจากวิธีการดูจะเริ่มทำงานดังที่แสดงในภาพหน้าจอต่อไปนี้

VueJS ไม่สามารถตรวจพบการเพิ่มและการลบคุณสมบัติ วิธีที่ดีที่สุดคือการประกาศคุณสมบัติเสมอซึ่งจะต้องมีการตอบสนองล่วงหน้าในอินสแตนซ์ Vue ในกรณีที่เราต้องการเพิ่มคุณสมบัติในขณะดำเนินการเราสามารถใช้วิธี Vue global, Vue.set และ Vue.delete

Vue.set

วิธีนี้ช่วยในการตั้งค่าคุณสมบัติบนวัตถุ ใช้เพื่อหลีกเลี่ยงข้อ จำกัด ที่ Vue ไม่สามารถตรวจจับการเพิ่มคุณสมบัติได้

ไวยากรณ์

Vue.set( target, key, value )

ที่ไหน

เป้าหมาย: สามารถเป็นวัตถุหรืออาร์เรย์

คีย์: สามารถเป็นสตริงหรือตัวเลข

ค่า: สามารถเป็นประเภทใดก็ได้

ลองมาดูตัวอย่าง

ตัวอย่าง

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         vm.products.qty = "1";
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

ในตัวอย่างข้างต้นมีตัวแปร myproduct ที่สร้างขึ้นเมื่อเริ่มต้นโดยใช้โค้ดต่อไปนี้

var myproduct = {"id":1, name:"book", "price":"20.00"};

มอบให้กับออบเจ็กต์ข้อมูลในอินสแตนซ์ Vue ดังนี้ -

var vm = new Vue({
   el: '#app',
   data: {
      counter: 1,
      products: myproduct
   }
});

ลองพิจารณาว่าเราต้องการเพิ่มคุณสมบัติอีกหนึ่งรายการในอาร์เรย์ myproduct หลังจากสร้างอินสแตนซ์ Vue แล้ว สามารถทำได้ดังนี้ -

vm.products.qty = "1";

มาดูผลลัพธ์ในคอนโซลกัน

ดังที่เห็นข้างต้นในผลิตภัณฑ์จะมีการเพิ่มปริมาณ เมธอด get / set ซึ่งโดยพื้นฐานแล้วการเพิ่มค่า reactivity นั้นมีให้สำหรับ id ชื่อและราคาและไม่สามารถใช้ได้กับจำนวน

เราไม่สามารถบรรลุปฏิกิริยาได้โดยเพียงแค่เพิ่มวัตถุ vue VueJS ส่วนใหญ่ต้องการให้คุณสมบัติทั้งหมดถูกสร้างขึ้นตั้งแต่เริ่มต้น อย่างไรก็ตามในกรณีที่เราต้องการเพิ่มในภายหลังเราสามารถใช้ Vue.set สำหรับสิ่งนี้เราจำเป็นต้องตั้งค่าโดยใช้ vue global เช่น Vue.set

ตัวอย่าง

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.set(myproduct, 'qty', 1);
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

เราได้ใช้ Vue.set เพื่อเพิ่มจำนวนให้กับอาร์เรย์โดยใช้โค้ดต่อไปนี้

Vue.set(myproduct, 'qty', 1);

เราได้ปลอบวัตถุ vue แล้วและต่อไปนี้คือผลลัพธ์

ตอนนี้เราสามารถดู get / set สำหรับจำนวนที่เพิ่มโดยใช้ Vue.set

Vue.delete

ฟังก์ชันนี้ใช้เพื่อลบคุณสมบัติแบบไดนามิก

ตัวอย่าง

Vue.delete( target, key )

ที่ไหน

เป้าหมาย: สามารถเป็นวัตถุหรืออาร์เรย์

คีย์: อาจเป็นสตริงหรือตัวเลขก็ได้

ในการลบคุณสมบัติใด ๆ เราสามารถใช้ Vue.delete ดังรหัสต่อไปนี้

ตัวอย่าง

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.delete(myproduct, 'price');
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

ในตัวอย่างข้างต้นเราได้ใช้ Vue.delete เพื่อลบราคาออกจากอาร์เรย์โดยใช้โค้ดต่อไปนี้

Vue.delete(myproduct, 'price');

ต่อไปนี้เป็นผลลัพธ์ที่เราเห็นในคอนโซล

หลังจากลบเราจะเห็นเฉพาะ id และชื่อเมื่อราคาถูกลบ นอกจากนี้เรายังสังเกตได้ว่าเมธอด get / set ถูกลบ