vue_activity: removing v-model in a multiselect (try to fix warning in console)

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue

@@ -1,12 +1,12 @@
 <template>
    <teleport to="#social-issues-acc">
-      
+
       <div class="mb-3 row">
          <div class="col-4">
             <label class="col-form-label">{{ $t('activity.social_issues') }}</label>
          </div>
          <div class="col-8">
-            
+
             <check-social-issue
                v-for="issue in socialIssuesList"
                v-bind:key="issue.id"
@@ -14,7 +14,7 @@
                v-bind:selection="socialIssuesSelected"
                @updateSelected="updateIssuesSelected">
             </check-social-issue>
-            
+
             <div class="my-3">
             <VueMultiselect
                name="otherIssues"
@@ -28,16 +28,15 @@
                v-bind:taggable="false"
                v-bind:multiple="false"
                v-bind:searchable="true"
-               v-bind:allow-empty="true" 
+               v-bind:allow-empty="true"
                v-bind:show-labels="false"
                v-bind:loading="issueIsLoading"
                v-bind:placeholder="$t('activity.choose_other_social_issue')"
                v-bind:options="socialIssuesOther"
-               v-model="value"
                @select="addIssueInList">
             </VueMultiselect>
             </div>
-            
+
          </div>
       </div>
 
@@ -46,11 +45,11 @@
             <label class="col-form-label">{{ $t('activity.social_actions') }}</label>
          </div>
          <div class="col-8">
-            
+
             <div v-if="actionIsLoading === true">
                <i class="chill-green fa fa-circle-o-notch fa-spin fa-lg"></i>
             </div>
-            
+
             <check-social-action
                v-if="socialIssuesSelected.length || socialActionsSelected.length"
                v-for="action in socialActionsList"
@@ -59,19 +58,18 @@
                v-bind:selection="socialActionsSelected"
                @updateSelected="updateActionsSelected">
             </check-social-action>
-            
+
             <span v-else class="inline-choice chill-no-data-statement mt-3">
                {{ $t('activity.select_first_a_social_issue') }}
             </span>
-            
+
          </div>
       </div>
-      
+
    </teleport>
 </template>
 
 <script>
-import { readonly } from 'vue';
 import VueMultiselect from 'vue-multiselect';
 import CheckSocialIssue from './SocialIssuesAcc/CheckSocialIssue.vue';
 import CheckSocialAction from './SocialIssuesAcc/CheckSocialAction.vue';
@@ -113,7 +111,7 @@ export default {
       this.issueIsLoading = true;
       getSocialIssues().then(response => new Promise((resolve, reject) => {
          this.$store.commit('updateIssuesOther', response.results);
-         
+
          /* Add in list the issues already associated (if not yet listed)
          */
          this.socialIssuesSelected.forEach(issue => {
@@ -121,34 +119,34 @@ export default {
                this.$store.commit('addIssueInList', issue);
             }
          }, this);
-         
+
          /* Remove from multiselect the issues that are not yet in checkbox list
          */
          this.socialIssuesList.forEach(issue => {
             this.$store.commit('removeIssueInOther', issue);
          }, this);
-         
+
          /* Filter issues
          */
          this.$store.commit('filterList', 'issues');
-         
+
          /* Add in list the actions already associated (if not yet listed)
          */
          this.socialActionsSelected.forEach(action => {
             this.$store.commit('addActionInList', action);
          }, this);
-         
+
          /* Filter issues
          */
          this.$store.commit('filterList', 'actions');
-         
+
          this.issueIsLoading = false;
          resolve();
-      }));   
+      }));
    },
    methods: {
-   
+
-      /* When choosing an issue in multiselect, add it in checkboxes (as selected), 
+      /* When choosing an issue in multiselect, add it in checkboxes (as selected),
          remove it from multiselect, and add socialActions concerned
       */
       addIssueInList(value) {
@@ -171,30 +169,30 @@ export default {
          //console.log('updateActionsSelected', actions);
          this.$store.dispatch('updateActionsSelected', actions);
       },
-      /* Add socialActions concerned: after reset, loop on each issue selected 
+      /* Add socialActions concerned: after reset, loop on each issue selected
          to get social actions concerned
       */
       updateActionsList() {
          //console.log('updateActionsList');
          this.resetActionsList();
          this.socialIssuesSelected.forEach(item => {
-            
+
             this.actionIsLoading = true;
             getSocialActionByIssue(item.id)
                .then(actions => new Promise((resolve, reject) => {
-                  
+
                   actions.results.forEach(action => {
                      this.$store.commit('addActionInList', action);
                   }, this);
-                  
+
                   this.$store.commit('filterList', 'actions');
-                  
+
                   this.actionIsLoading = false;
                   resolve();
             }));
          }, this);
       },
-      /* Reset socialActions List: flush list and restore selected actions 
+      /* Reset socialActions List: flush list and restore selected actions
       */
       resetActionsList() {
          this.$store.commit('resetActionsList');