时间戳

首页 > 解决方案 > 为什么我的 vue.js 页面在输入 jQuery 加减号按钮时无法加载？其他页面都能流畅运行

javascript - 为什么我的 vue.js 页面在输入 jQuery 加减号按钮时无法加载？其他页面都能流畅运行

问题描述

我遇到了一个问题，我无法识别/理解我的应用程序出了什么问题。但是，当我开始在“vue ui”命令中构建项目时，我基于 Web 的应用程序中的其他页面能够成功运行。

<template>
<body>
  <tr>
    <table><tr class="break"></tr></table>
</tr>
<tr>
    <table><tr class="break"></tr></table>
</tr>
<footer class="footer"> <div class="container"> <span class="text-muted"> <b-nav tabs justified>
<b-nav-item active><router-link to="MenuTable1">Back to main menu</router-link></b-nav-item>
<b-nav-item><router-link to="MealStep2Table1">Proceed to next step</router-link></b-nav-item></b-nav></span></div>
</footer>
<tr>
    <table><tr class="break"></tr></table>
</tr>
<tr>
    <table><tr class="break"></tr></table>
</tr>
<tr>
    <table><tr class="break"></tr></table>
</tr>
<tr>
    <table><tr class="break"></tr></table>
</tr>
    <h3 align="text-align:left"> <b-badge pill variant="info">
       Step 1: Choose Your Carbohydrate</b-badge></h3>
    <h4 style="text-lg-left"><b-badge variant="primary">Item 1 </b-badge></h4>
  <tr>
<img align="centre" src="@/assets/drawable/bistro.jpg" alt="Bistro" style="width:100%">
    <tr><div class="quantity">
    <b-input-group>
      <b-input-group-prepend>
        <b-btn variant="danger" @click="decrement()">-</b-btn>
      </b-input-group-prepend>
      <b-form-input type="number" min="0.00" :value="quantity" id="step1_1"></b-form-input>
      <b-input-group-append>
        <b-btn variant="success" @click="increment()">+</b-btn>
      </b-input-group-append>
    </b-input-group>
  </div></tr>
  <tr>
    <table><tr class="break"></tr></table></tr>
  <tr>
    <table><tr class="break"></tr></table></tr>
      <tr>
    <table><tr class="break"></tr></table></tr>
  <tr>
    <table><tr class="break"></tr></table></tr>
    <div class="text-center"><b-button variant = "outline-success">Add to Cart</b-button></div>
<tr>
    <table><tr class="break"></tr></table>
</tr>
<tr>
    <table><tr class="break"></tr></table>
</tr>
<h4 style="text-center"><b-badge variant="secondary">Item 2</b-badge></h4>
<img align="centre" src="@/assets/drawable/bistro.jpg" alt="Bistro" style="width:100%">
 <div class="quantity">
    <b-input-group>
      <b-input-group-prepend>
        <b-btn variant="danger" @click="decrement()">-</b-btn>
      </b-input-group-prepend>

      <b-form-input type="number" min="0.00" :value="quantity" id="step1_2"></b-form-input>

      <b-input-group-append>
        <b-btn variant="success" @click="increment()">+</b-btn>
      </b-input-group-append>
    </b-input-group>
  </div>
  <tr>
    <table><tr class="break"></tr></table></tr>
  <tr>
    <table><tr class="break"></tr></table></tr>
      <tr>
    <table><tr class="break"></tr></table></tr>
  <tr>
    <table><tr class="break"></tr></table></tr>
    <div class="text-center"><b-button variant = "outline-success">Add to Cart</b-button></div>
<tr>
    <table><tr class="break"></tr></table>
</tr>
<button class="counter-btn" id="increase1" type="button" data-index="1" data-inc="1">+</button>
<button class="counter-btn" id="decrease1" type="button" data-index="1" data-inc="-1">-</button>
<div class="output" id="output-1">+30</div>

<hr />

<button class="counter-btn" id="increase2" type="button" data-index="2" data-inc="1">+</button>
<button class="counter-btn" id="decrease2" type="button" data-index="2" data-inc="-1">-</button>
<div class="output" id="output-2">+30</div>
<tr>
    <table><tr class="break"></tr></table>
</tr>
</body>
</template>

<style>
table, td {
  border: 1px solid black;
  border-collapse: collapse;
}
td {
  padding: 5px;
  text-align: left;}
  tr.break {
  height: 10px;
}
.footer {
  position: fixed;
  top: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}
</style>

<script>
import $ from 'jquery'
$('.counter-btn').click(function (e) {
  e.preventDefault()
  var $btn = $(this)
  $('#output-' + $btn.data('index')).html(function (i, val) {
    val = val * 1 + $btn.data('inc')
    return (val <= 0 ? '' : '+') + val
  })
})
</script>

在查看vue ui服务器下的输出时，显示页面有警告

"export 'default' (imported as 'mod') was not found in '-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MealStep1Table1.vue?vue&type=script&lang=js&'
<s> [webpack.Progress] 98% after emitting CopyPlugin
<s> [webpack.Progress] 98% after emitting vue-cli-dashboard-plugin
<s> [webpack.Progress] 100%

我已将 jQuery 安装到项目中。我还在项目中使用了 bootstrap/bootstrap-vue。

有了这个，我感谢我能得到的所有帮助和建议。

标签： javascriptjqueryhtmlcssvue.js

解决方案

推荐阅读