نمایش گزینه های انتخاب شده چک باکس با استفاده از vue در لاراول

میلاد جان ممنون ... مختصر و مفید ...
یه سوال :
وقتی از لیست موارد فیلتر تیک چک باکس رو بر میداریم موارد انتخاب شده برای فیلتر از بین میره که بایدم اینجوری باشه و مشکلی نیست ...
حالا چجوری میتونیم موارد انتخاب شده برای فیلتر کردن رو از قسمتی که برای نمایش داده ها که با استفاده از حلقه v-for نمایش دادیم حذف کنیمو از لیستمون تیکشون رو برداریم ؟
@milad

خواهش میکنم، زنده باشید.
به کمک یک آرایه و v-model میتونی ورودی های از نوع checkbox رو، تیک هاشون رو نمایش بدی یا برداری.
این مثال رو نگاه کنید: https://vuejs.org/v2/guide/forms.html#Checkbox

سوالمو بد مطرح کردم
منظورم اینه که :
فرض کنید ما دوتا باکس داریم
باکس اول ( A )
داخلش لیستی از مواردی هست که میتونیم برای فیلتر کردن ازشون استفاده کنیم که با کد زیر نمایش داده میشه :
<input type="checkbox" v-model="mallcatone" :value="citymenus.name">
با انتخاب هر کدوم تیکش خورده میشه(همزمان تیک نمایش داده میشه ) و عملیات فیلتر هم انجام میشه و وقتی تیک رو برمیداریم به خوبی کار میکنه.(مشکلی در این بخش و باکس اول ( A )نیست )

باکس دوم ( B )
مواردی داخلش نمایش داده میشه که ما از طریقباکس اول ( A ) به عنوان گزینه های فیلتر انتخاب کردیم که با روشی که شما فرمودید میتونیم گزینه هاشو نمایش بدیم.
این گزینه هارو اگر از باکس اول ( A ) تیکشون رو برداریم دیگه داخل باکس دوم ( B ) نمایش داده نمیشه که درست هم هست ...

حالا سوال من اینه که
چجوری میتونیم از همین باکس دوم ( B ) گزینه فیلتر شده رو حذف کنیم و همزمان تیکش هم از باکس اول ( A ) برداشته بشه؟
ممنون میشم راهنمایی کنید...
@milad

ابتدا یک نکته: لطفا وقتی میخواید داخل انجمن کدهارو قرار بدین، از دکمه مربوطه در ویرایشگر استفاده کنید که از حالت راستچین دربیاد و خوانا بشه.

پاسخ به سوالتون:
کافیه هنگامی که دارید این بخش دوم رو از طریق v-for ایجاد می کنید، برای هر کدوم از موارد یک رویداد @click قرار بدین و تابع مرتبطی که براش تعریف می کنید، مقدار ورودی رو ازش بگیره و بره توی بخش داده ای تون پیداش کنه و از اونجا حذفش کنه.
اگر توضیحم گویاس که هیچ، اگر گویا نیست، شما کدهای مرتبط به این بخش رو قرار بدین تا روی کدها بهتر بشه توضیح داد.

مرسی بابت نکته خوبتون در رابطه با قراردادن کدها داخل انجمن...
کدهای داخل فایل app.js و فایل blade به صورت زیر هستش..لطفا ببینید...

کد خود را اینجا وارد کنید

<!---------------------------box A-همه گزینه ها-----------------------> 
 SendMall:function(id){
            axios.post('/citymenu', {
                id: id
            }).then(response => {
              this.citymenu=response.data;
          }, response => {
             this.error = 1;
             console.log('error');
         });
        },  
<!---------------------box B-گزینه های انتخاب شده---------------------> 

            filtermallcatone:function(data){
                if (this.mallcatone.length == 0) return true ;
                console.log(data.district);
                return this.mallcatone.includes(data.district);
        },
<!------------------------------html--------------------------------->  
<div class="col-lg-12">
  <div class="col-lg-12 py-2">
    <h6>box B-گزینه های انتخاب شده</h6>
    <span v-for="mallcatones in mallcatone">
      <i @click="" class="fa fa-remove"></i>
      <a v-text="mallcatones"></a>
    </span> 
  </div>    
   <div class="col-lg-12">
      <h6>box A-همه گزینه ها</h6>
            <div class="dropdown-content">
              <ul class="col-lg-12">                  
                  <li v-for="citymenus in citymenu">
                       <input class="name" type="checkbox" v-model="mallcatone" :value="citymenus.name">
                     @{{ citymenus.name }}
                  </li>
               </ul>
             </div>  
     </div>     
</div>

@milad

راستش درست متوجه نمیشم کدوم متغیر مربوط به داده ها میشه،
نمونه vue رو نمی دونم چرا قرار ندادین، اون بود بهتر بود.

یخورده حجم کدها زیاد بود فراموش کردم ...
لطفا این کدهارو بررسی کنید

const app = new Vue({
    el: '#app',
data:{
   //متغیر مربوط به داده های انتخاب شده برای فیلتر
     mallcatone:[],

//متغیر مربوط به همه گزینه ها برای فیلتر
    citymenu:[],
{
 methods:{
 SendMall:function(id){
            axios.post('/citymenu', {
                id: id
            }).then(response => {
              this.citymenu=response.data;
          }, response => {
             this.error = 1;
             console.log('error');
         });
        },  

filtermallcatone:function(data){
         if (this.mallcatone.length == 0) return true ;
         console.log(data.district);
          return this.mallcatone.includes(data.district);
        },

@milad

این مثال رو من مبتنی بر کد شما نوشتم و به سادگی چیزی که مورد نظرتون هستش رو برآورده می کنه:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js</title>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- <script src="./vue.global.js"></script> -->

    <style>
        .wrapper {
            display: flex;
            justify-content: center;
            max-width: 1000px;
            margin: 120px auto 0;
        }
        #box-1, #box-2 {
            padding: 15px;
        }
        #box-1 {
            border-right: 2px solid silver;
        }
        .item {
            display: flex;
            align-items: center;
        }
        .close {
            width: 12px;
            height: 12px;
            padding: 4px;
            margin: 4px;
            color: red;
            font-size: 10px;
            text-align: center;
            border-radius: 50%;
            border: 2px solid red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">

        <div class="wrapper">
            <div id="box-1">
                <h3>box-1</h3>
                <div v-for="el in citymenu">
                    <input type="checkbox" :id="el.name" :value="el.name" v-model="mallcatone" />
                    <label :for="el.name">{{el.name}}</label>
                </div>
            </div>
            <div id="box-2">
                <h3>box-2</h3>
                <div v-for="el in mallcatone" class="item">
                    <span @click="removeSelected(el)" class="close">X</span>
                    <a v-text="el"></a>
                </div>            
            </div>
        </div>
        <div class="wrapper">mallcatone names: {{ mallcatone }}</div>   

    </div>

    <!-- <script src="./main.js"></script> -->

    <script>
    const app = Vue.createApp({
        data() {
            return {
                citymenu: [],
                mallcatone: [],
            }
        },
        methods: {
            removeSelected(el) {
                this.mallcatone.splice(this.mallcatone.indexOf(el), 1);            
            },
        },
        created () {
            this.citymenu = [
                {name: 'Tehran', other: '100'},
                {name: 'Esfahan', other: '120'}, 
                {name: 'Shiraz', other: '110'}, 
                {name: 'Tabriz', other: '150'}, 
                {name: 'Mashhad', other: '130'}, 
                {name: 'Khozestan', other: '190'},
                {name: 'Yazd', other: '200'},
                {name: 'Zahedan', other: '130'},
                {name: 'Gilan', other: '170'},
                {name: 'Zanjan', other: '110'},
                {name: 'Kerman', other: '150'}
            ]
        }

    }).mount('#app');
    </script>
</body>
</html>

این مثال رو کپی کنید و کدهارو بررسی کنید.
به نظرم نیاز هستش که شما روی مبانی یادگیری vuejs کار کنید، چون سوال تون با همون مبانی اولیه پاسخگویی میشه و به نظر میرسه مبانی براتون جا نیفتاده.

دقیقا ... متاسفانه با اموزشهایی رفتم جلو که اصلا کامل نبودند...ممنون از راهنماییتون
@milad

میلاد جان سپاس فراوان ...
ممنون از وقتی که گذاشتی ...
@milad

خواهش می کنم،
وقت گذاشتم تا حلش کنم، واسه خودمم سودمند بودش : )
به تازگی vue 3 منتشر شده، زمان مناسبی هستش که مُرور کنید مطالب رو و گیرهایی که حین کار براتون پیش میاد رو برطرف کنید.