vue.js 反应性和数据与 mixin

Question

我正在尝试根据某些条件设置一个可以是布尔值 true 或 false 的标志。

// main.js
new Vue({
    el: `#app`,
    render: h => h(App,{
      props:{
        todoID: this.dataset.id
      }
    })
  })

我的应用脚本

export default {
  name: 'App',
  props: {
    todoID: String,
  },
  data() {
    return {
      isDone: false // here is the initial flag
    }
  },
  ...

我创建了一个 mixin 方法

import Vue from "vue";

Vue.mixin({
    methods: {
        isCompleted() {
            if (myconditions){
                this.isDone = true; // I want to change the flag to true
            }
        },
    },
});

在我的模板中，如果我做{{isDone}} 我总是得到错误，我怎样才能将其更改为反应性以便可以根据条件进行更改？

这是我创建的一个演示：https://codesandbox.io/embed/vigorous-bell-p1itu?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Vue.mixin({
    methods: {
        isCompleted(myconditions) {
            console.log(myconditions);
            console.log(typeof myconditions);
              return  this.isDone = myconditions; // I want to change the flag to true
            
        },
    },
});
new Vue({
    el: '#vue-app',
    data: {
        isDone: false 
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

        <div id="vue-app">
            <p> result = {{ isCompleted(true) }}</p>
        </div>
    </body>