个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我在后端使用 Django，我想在前端使用 Vue.js 库。我将它们包含在 CDN 中。问题是脚本的第一行总是出现错误 Uncaught SyntaxError: Unexpected identifier。我怀疑这是因为导入，但我不知道如何使用该库。有任何想法吗？提前致谢。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<link rel="stylesheet" type="text/css" href="/static/fortykwords/style.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>
</head>
<body>
<ul class="sidebar-nav">
<p>sidebar</p>
<li><a href="/profile/">pepe14</a></li>
<li><a href="/accounts/logout/?next=/submit/">Logout</a></li>
</ul>
<template>
<div>
<vue-tags-input
v-model="tag"
:tags="tags"
@tags-changed="newTags => tags = newTags"
/>
</div>
</template>
<script>
import VueTagsInput from '@johmun/vue-tags-input';
export default {
components: {
VueTagsInput,
},
data() {
return {
tag: '',
tags: [],
};
},
};
</script>
<form action="" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='fEEj9YrFOkChjlhrZ7HPgDoiJNcnb0ILUrd143icwaZ58No1Ckl8tTr0p9TxRMi7' />
<table>
<tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" required id="id_title" maxlength="250" /></td></tr>
<tr><th><label for="id_body">Body:</label></th><td><textarea name="body" cols="40" required id="id_body" maxlength="40000" rows="10">
</textarea></td></tr>
<tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" required id="id_tags" /><br /><span class="helptext">A comma-separated list of tags.</span></td></tr>
</table>
<input type="submit" value="Submit" />
</form>
</body>
</html>
最佳答案
由于您同时使用 Vue 和从 CDN 输入的 vue 标签，因此您不能依赖导入/导出。因此，首先您需要从代码中删除它们:
import VueTagsInput from '@johmun/vue-tags-input';
和
导出默认值{}
对于 Vue 组件。
最重要的是，如果 vue 标签输入有效，您的 Vue 组件代码将无法正常工作:
<template>
<script>
<style>
来自 Vue 单文件组件的语法不能立即在浏览器中使用。此外，您没有从任何 Vue 实例导入/渲染组件，因此，即使组件和 vue 标签输入都有效，html 页面中也不会出现任何内容。
为了让这个东西工作，你需要两件事:
el 属性的 html 标记中。我为标签 ID 选择了 #element。以下修改后的代码片段可以正常工作:
<title>title</title>
<link rel="stylesheet" type="text/css" href="/static/fortykwords/style.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>
</head>
<body>
<ul class="sidebar-nav">
<p>sidebar</p>
<li><a href="/profile/">pepe14</a></li>
<li><a href="/accounts/logout/?next=/submit/">Logout</a></li>
</ul>
<div id="element">
<vue-tags-input
v-model="tag"
:tags="tags"
@tags-changed="newTags => tags = newTags"
/>
</div>
<form action="" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='fEEj9YrFOkChjlhrZ7HPgDoiJNcnb0ILUrd143icwaZ58No1Ckl8tTr0p9TxRMi7' />
<table>
<tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" required id="id_title" maxlength="250" /></td></tr>
<tr><th><label for="id_body">Body:</label></th><td><textarea name="body" cols="40" required id="id_body" maxlength="40000" rows="10">
</textarea></td></tr>
<tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" required id="id_tags" /><br /><span class="helptext">A comma-separated list of tags.</span></td></tr>
</table>
<input type="submit" value="Submit" />
</form>
<script>
new Vue({
el: '#element',
data: {
tag: '',
tags: [],
},
});
</script>
</body>
</html>
由于当您从 cdn 导入时，vue 标签输入会自动将其自身加载到 window 中，因此您无需在 Vue 实例中导入/引用该组件。
关于javascript - 尝试使用来自 CDN 的 Vue.js 库，但出现未捕获语法错误 : Unexpected identifier，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51581765/
24
4
0
多个 ChildException catch block 和一个 Exception catch block 之间哪个更好？ 更好，我的意思是以良好的实践方式。 举例说明: public stati
我正在尝试将脱机计算机记录在文本文件中，以便以后可以再次运行它们。似乎没有被记录或捕获。 function Get-ComputerNameChange { [CmdletBinding()]
我正在将 Scala 'try/catch' 测试代码转换为使用 'intercept' 有没有我不应该使用“拦截”的场景？使用 'intercept' 而不是 'try/catch' 的唯一好处是简
我对erlang很陌生，我正在尝试使用基本的try/catch语句来工作。我正在使用Webmachine处理一些请求，我真正想做的就是解析一些JSON数据并将其返回。如果JSON数据无效，我只想返回一
我不知道如何捕获删除按键。我发现在 ASCII 代码表中，它位于 127 位，但是 if (Key = #127) then 却无济于事。 然后我检查了 VK_DELETE 的值，它是 47。尝试使用
我很少在失败时对数据库查询使用唯一的错误消息 我经常使用简短的标准消息，例如“数据库错误/失败。请与网站管理员联系”或类似的消息。或自动发送给我 我正在寻找一种在PDO中全局设置一次try {}和ca
我有一个变量CompletableFuture completableFuture 。我希望能够使用任何类型的对象来完成它。例如:completableFuture.complete(new Stri
我认为这是基本的东西，但我不知道该怎么做。为什么我得到 IOException never throw in body of相应的 try 语句 public static void main(Str
我在此代码中遇到 JSON 异常: JSONObject jObject = new JSONObject(JSONString); pontosUsuario.setIdUsuari
我正在尝试打印出用单引号括起来的文本。 /bin/bash -lc '/home/CASPER_REPORTS/scripts/CASPER_gen_report.sh CASPER_1' /bin/
我这里遇到了一点问题。我想弄清楚如何捕获 IllegalArgumentException。对于我的程序，如果用户输入负整数，程序应该捕获 IllegalArgumentException 并询问用户
我无法理解 EJBTransactionRolledbackException。 我有实体: @Entity public class MyEntity { @Id @Generate
对于我给自己提出的以下挑战，如果社区的经验给我任何建议，我将不胜感激 - 即，这里有任何关于最佳方法/方向的指示吗？ 要求 允许收集/实时监控从用户 Windows PC 到一组特定 IP 地址(或
我想在我的 ABAP 代码中捕获并处理 SAPSQL_DATA_LOSS。 我试过这个: try. SELECT * FROM (rtab_name) AS rtab
我知道捕获错误不是一个好的做法，但在这种情况下，这样做很重要。我正在尝试运行一个包含游戏一部分的 jar，但它给了我一个 unsatisfiedlink 错误，但这是有趣的部分:我正在使用这段代码:
我有一个表单页面，当我保存它时，它会覆盖数据库。表单页面中有一个文本框，允许用户输入 4000 个字符，但如果用户输入的字符超过此值，则会出现以下错误: ERROR 15:54:05 Abstrac
我想知道在python中绑定(bind)键的最简单方法 例如，默认的 python 控制台窗口出现并等待，然后在 psuedo -> if key "Y" is pressed: print (
下面是别人写的类。 我面临的问题是，当它进入parse method时与 null as the rawString ，它正在扔NumberFormatException 。 所以我想做的是，我应该捕
我有一个简单的脚本，可以捕获所有鼠标单击，除非您单击实际有效的内容。链接、Flash 视频等。我如何调整它，以便无论用户点击什么，在视频加载、新页面加载等之前，它都会发送我构建的简单 GET 请求？
我有一个带有一些选择列表的表单，当选择某些值时，这些列表将显示/隐藏更多输入字段。 问题是大多数用户都是数据输入人员，因此他们在输入数据时大量使用键盘，并且选择列表的 change 事件仅在焦点离开输
我是一名优秀的程序员,十分优秀！