Question

我想在mixin.js中分离MyLayout.vue的方法

这是原始的MyLayout.vue

<template>
...

    <q-layout-drawer
      v-model="leftDrawerOpen"
      :content-class="$q.theme === 'mat' ? 'bg-grey-2' : null"
    >
      <q-list no-border link inset-delimiter>
        <q-list-header>Listas de tareas</q-list-header>
        <q-item v-for="list of lists" :key="list._id" 
          :class="{active:list._id == selected}" @click.native="selected = list._id">
          <q-item-main :label="list.title" />
          <q-item-side right icon="delete" 
          v-if="selected == list._id"
          @click.native="deleteList(selected)"/>
        </q-item>
        <q-item>
          <q-item-main>
            <q-input v-model.trim="list.title" placeholder="+ Nueva lista" @keyup.enter="sendList"/>
          </q-item-main>
          <q-item-side right icon="format_color_fill">
            <q-popover>
              <q-color-picker v-model="list.color"/>
            </q-popover>
          </q-item-side>
        </q-item>
      </q-list>
    </q-layout-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import { openURL } from 'quasar'

class List {
  constructor(title = '', color = '') {
    this.title = title;
    this.color = color;
  }
}

export default {
  name: 'MyLayout',
  data () {
    return {
      leftDrawerOpen: this.$q.platform.is.desktop,
      list: new List(),
      lists: [],
      selected: undefined,
    }
  },
  created() {
    this.getLists();
  },
    methods: {
        openURL,
        submit () {
          return
        },
        sendList() {
        if(this.list.title == '') { return }
        else {
          fetch('http://localhost:3000/api/lists', {
            method: 'POST',
            body: JSON.stringify(this.list),
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            }
          })
            .then(res => res.json())
            .then(data => {
              this.getLists();
              this.list = new List();
            });
        }
        },

      getLists() {
        fetch('http://localhost:3000/api/lists')
          .then(res => res.json())
          .then(data => {
            this.lists = data;
          });
      },

      deleteTask(listId) {
        fetch('http://localhost:3000/api/lists/' + listId, {
          method: 'DELETE',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }
        })
          .then(res => res.json())
          .then(data => {
            this.getLists();
          });
      },
    }
}
</script>

我尝试了这个： mixins.js

export default {
  created: function() {
    this.getLists();
  },
  methods: {
    sendList: function() {
      if(this.list.title == '') { return }
      else {
        fetch('http://localhost:3000/api/lists', {
          method: 'POST',
          body: JSON.stringify(this.list),
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }
        })
          .then(res => res.json())
          .then(data => {
            this.getLists();
            this.list = new List();
          });
      }
    },

    getLists: function() {
      fetch('http://localhost:3000/api/lists')
        .then(res => res.json())
        .then(data => {
          this.lists = data;
        });
    },

    deleteList: function(listId) {
      fetch('http://localhost:3000/api/lists/' + listId, {
        method: 'DELETE',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        }
      })
        .then(res => res.json())
        .then(data => {
          this.getLists();
        });
    },
  }
}

（当然，我从MyLayout.vue中删除了这些功能）

我有此错误（两次，例如，如果mixins运行两次不知道为什么）

属性或方法“列表”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的。

看来，如果将方法放在外部文件中，则无法接收数据。我还尝试过在方法之前将以下数据添加到mixins.js：

data () {
    return {
      list: new List(),
      lists: [],
      selected: undefined,
    }
  },

但是我仍然遇到很多错误

在MyLayout.vue中

data（）中的错误：“ ReferenceError：列表未定义”

属性或方法“ leftDrawerOpen”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的。

属性或方法“列表”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的。

渲染错误：“ TypeError：无法读取未定义的属性'title'”

TypeError：无法读取未定义的属性“ title”

在mixins.js中

列表未定义

编辑：我也尝试了mixin.js中的类（超出了导出默认值）...我仍然遇到双重错误：

“属性或方法“列表”未在实例上定义，但在渲染期间被引用”。

如何将方法从MyLayout.vue分离到mixin.js？

0 个答案: