[Vue警告]:无法安装组件:未定义模板或渲染功能。 -vue-simple-uploader

时间:2019-05-02 17:35:07

标签: typescript vue.js vuejs2

我的组件如下所示。

import collections

from ortools.sat.python import cp_model


# Create the model.
model = cp_model.CpModel()

# Create variables to represent ngrams in model.
buckets = range(2)
ngram_indexes_per_bucket = range(2)

interval_bucket0_ngram0 = model.NewOptionalIntervalVar(0, 1, 1, True, 'interval_bucket0_ngram0')
interval_bucket0_ngram1 = model.NewOptionalIntervalVar(0, 2, 2, True, 'interval_bucket0_ngram1')
interval_bucket1_ngram0 = model.NewOptionalIntervalVar(1, 2, 3, True, 'interval_bucket1_ngram0')
interval_bucket1_ngram1 = model.NewOptionalIntervalVar(2, 1, 3, True, 'interval_bucket1_ngram1')

all_ngrams = {}  # key = (bucket, ngram index); value = interval var and bool var.
ngram = collections.namedtuple('ngram', 'interval is_selected')
all_ngrams[(0, 0)] = ngram(interval=interval_bucket0_ngram0, is_selected=model.NewBoolVar('interval_bucket0_ngram0'))
all_ngrams[(0, 1)] = ngram(interval=interval_bucket0_ngram1, is_selected=model.NewBoolVar('interval_bucket0_ngram1'))
all_ngrams[(1, 0)] = ngram(interval=interval_bucket1_ngram0, is_selected=model.NewBoolVar('interval_bucket1_ngram0'))
all_ngrams[(1, 1)] = ngram(interval=interval_bucket1_ngram1, is_selected=model.NewBoolVar('interval_bucket1_ngram1'))

# Maximize total value: values[bucket][n_gram index].
values = [[1, 3],
          [2, 1]]
model.Maximize(sum(values[bucket][i] * all_ngrams[(bucket, i)].is_selected
                   for bucket in buckets for i in ngram_indexes_per_bucket))

# Constraint (1): select 1 ngram from each bucket.
for bucket in buckets:
    model.Add(sum(all_ngrams[(bucket, i)].is_selected for i in ngram_indexes_per_bucket) == 1)

# Constraint (2): selected ngrams cannot be overlapping.
intervals = [all_ngrams[(0, 0)].interval, all_ngrams[(0, 1)].interval, all_ngrams[(1, 0)].interval,
             all_ngrams[(1, 1)].interval]
#model.AddNoOverlap(intervals)

# Solve.
solver = cp_model.CpSolver()
status = solver.Solve(model)
print(solver.StatusName(status))
print('Optimal value: %i' % solver.ObjectiveValue())

# Write out solution.
for bucket in buckets:
    for i in ngram_indexes_per_bucket:
        print("bucket = {0}; ngram index = {1}".format(bucket, i))
        if solver.Value(all_ngrams[(bucket, i)].is_selected):
            print("Selected!")
        else:
            print("Not selected!")

我的shims-vue.d.ts文件如下所示:

<template>
            <uploader class="uploader-example">
                <uploader-unsupport></uploader-unsupport>
                <uploader-drop>
                    <p>Drop files here to upload or</p>
                    <uploader-btn>select files</uploader-btn>
                    <uploader-btn :directory="true">select folder</uploader-btn>
                </uploader-drop>
                <uploader-list></uploader-list>
            </uploader>

</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import uploader from 'vue-simple-uploader';
    @Component({
        components: {
            Uploader: uploader,
        },
    })
    export default class In extends Vue {

    }
</script>

使用上面的代码,我得到以下错误:

[Vue警告]:无法装入组件:模板或渲染函数未定义。

以及上传器组件未呈现。

我用了下面的包裹。

https://github.com/simple-uploader/vue-uploader

2 个答案:

答案 0 :(得分:2)

您错误地绑定了库–它被写为Vue plugin,而不是一个独立的组件。

the project readme中概述了正确的用法:

// main.ts
import Vue from 'vue'
import uploader from 'vue-simple-uploader'

Vue.use(uploader)

由于它是全局注册的,因此无需进一步导入作为子组件。这不是一个好习惯,但这是编写组件的方式。

答案 1 :(得分:1)

您忘记在主app.js文件中初始化上传器:

import Vue from 'vue'
import uploader from 'vue-simple-uploader'
import App from './App.vue'

Vue.use(uploader)

或尝试以下方法:

@Component({
    components: {
        uploader: uploader,
    },
})