- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 vue.js 和 api 作为后端构建电子商务网站,
我有一个名为 Main.vue
的根组件
导航为 router-link
和 router-view
的正文.
在一条名为 Cart.vue
的 route 当用户更新我需要的某些产品的数量时 Cart.vue
至$emit
一个 event
到根组件Main.vue
触发一个名为 getCartTotal()
的函数
提示 Cart.vue
不是 child component
的 Main.vue
Main.vue :
<template>
<div>
<div>
<div v-on:getCartAgain="getCartTotal()" id="top-header" class="has-background-ishtari">
<div class="container" style="padding:5px 0">
<div class="is-hidden-mobile" style="font-size: 13px">
<div
class="has-text-white has-text-right"
style="display: flex;align-items: center;justify-content: flex-end"
>
<i class="icon material-icons" style="margin-right: 0px;">attach_money</i>
<span style="margin-right:15px">Best Deals</span>
<i class="icon material-icons" style="margin-right: 5px;">low_priority</i>
<span style="margin-right: 15px">Free & Easy Returns</span>
<i class="icon material-icons" style="margin-right: 5px;">local_shipping</i>
<span>Free Delivery (OVER $100)</span>
</div>
</div>
</div>
<div class="container" style="padding:10px 0">
<div style="display: flex;justify-content: space-between;align-items: center;">
<div id="header-logo" @click="openHomePage()">
<img src="../assets/images/logo-ishtari.png" class width="140" />
</div>
<div style="flex-grow: 2;margin:0 40px">
<p class="control is-expanded">
<input
id="header-search"
class="input is-radiusless"
style="height: 35px;"
type="text"
placeholder="What are you looking for?"
/>
</p>
</div>
<div
class="has-text-white"
style="display: flex;align-items: center;justify-content: space-between"
>
<div style="display: flex;align-items: center;padding-right:10px">
<span>Login Or SignUp</span>
<i class="icon material-icons">arrow_drop_down</i>
</div>
<div
id="cart-container"
style="display: flex;align-items: center;padding-left: 15px;border-left:1px solid rgba(255,255,255,0.5)"
@click="openCartPage()"
>
<span style="margin-right:5px">Cart</span>
<span>
<i class="icon material-icons">shopping_cart</i>
<span
class="has-background-ishtari-blue is-paddingless"
:class="this.cartCount.length == 0 ? 'button is-loading' : ''"
id="cart-total"
>{{this.cartCount}}</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<vue-page-transition name="fade-in-right">
<router-view></router-view>
</vue-page-transition>
</div>
</template>
<script>
import VueCookies from "vue-cookies";
export default {
data() {
return {
showNav: false,
cartCount: "",
readyToken: false
};
},
created() {
this.checkToken();
},
mounted() {
this.getCartTotal();
},
methods: {
openCartPage() {
this.$router.push({ name: "cart" }).catch(err => {
return err;
});
},
openHomePage() {
this.$router.push({ name: "home" }).catch(err => {
return err;
});
},
checkToken() {
if (!VueCookies.isKey("token")) {
let requestBody = {
client_id: "shopping_oauth_client",
client_secret: "shopping_oauth_secret"
};
let requestHeader = {
"Content-Type": "application/x-www-form-urlencoded",
Authorization:
"Basic c2hvcHBpbmdfb2F1dGhfY2xpZW50OnNob3BwaW5nX29hdXRoX3NlY3JldA",
"Access-Control-Allow-Origin": "*",
"Cache-Control": null,
"X-Requested-With": null
};
window.axios
.post(window.main_urls["get-token"], requestBody, {
headers: requestHeader
})
.then(response => {
VueCookies.set("token", response.data.access_token);
});
} else {
console.log(VueCookies.get("token"));
}
},
getCartTotal() {
console.log("here");
let requestHeader = {
Authorization: "Bearer " + VueCookies.get("token"),
"Access-Control-Allow-Origin": "*",
"Cache-Control": null,
"X-Requested-With": null
};
window.axios
.get(window.main_urls["get-cart"], { headers: requestHeader })
.then(response => {
if (response.data.error === "Cart is empty") {
console.log(response.data);
this.cartCount = 0;
} else {
this.cartCount = response.data.data.products.length.toString();
}
});
}
}
};
</script>
<style>
</style>
Cart.vue :
<template>
<div class="has-background-ishtari-grey">
<div class="container">
<div>
<section v-if="this.loading || this.emptyCart" class="hero is-fullheight-with-navbar">
<div
v-if="this.loading"
class="button is-loading hero is-fullheight-with-navbar has-background-ishtari-grey"
style="border: none"
>Please Wait</div>
<div v-if="! this.loading && this.emptyCart" class="hero-body">
<div class="container has-text-centered">
<i class="material-icons has-text-grey" style="font-size: 80px">shopping_cart</i>
<h1 class="title has-text-grey has-text-weight-bold is-4">Your Shopping Cart Is Empty</h1>
<h2 class="subtitle title has-text-grey is-6">what are you waiting for</h2>
<br />
<button
@click="goHome()"
class="button is-ishtari-blue is-outlined has-text-weight-bold is-7"
>START SHOPPING</button>
</div>
</div>
</section>
</div>
<div class="section" v-if="! this.loading && !this.emptyCart">
<div class="columns is-bordered" id="cart-products-container">
<div class="column is-9" style="margin-right:20px">
<h1
class="subtitle has-text-weight-bold is-4"
>My Cart ({{this.cartData.products.length}} items)</h1>
<img
src="https://storage.googleapis.com/noon-cdn-res/rn/banners/en_disclaimer-cart-desktop.gif"
style="margin-bottom:15px"
/>
<div
class="cart-product-row has-background-white"
style="padding:10px 15px"
v-for="product in cartData.products"
:key="product.product_id"
>
<div
class="columns padding-top:20px"
:class="product.stock ? '' : 'has-background-danger'"
>
<div class="image is-128x128 column is-narrow">
<img :src="product.thumb" />
</div>
<div
class="column"
style="display:flex;flex-direction:column;justify-content:space-between"
>
<p
class="has-text-grey subtitle is-7 is-marginless"
style="margin-bottom:10px !important"
>{{product.model}}</p>
<p class="has-text-weight-bold" style="font-size:14px">{{product.name}}</p>
<p>
<i @click="product.quantity = 0;updateCartQuantity(product.key,0)" class="material-icons has-text-grey" id="cart-delete">delete</i>
</p>
</div>
<div
class="column is-narrow"
style="padding-left:15px;display:flex;flex-direction:column;justify-content:center"
>
<p class="has-text-weight-bold">{{product.price}}</p>
</div>
<div
class="column is-narrow"
style="display:flex;flex-direction:column;justify-content:center"
>
<div class="field has-addons">
<p class="control">
<a
@click="product.quantity = Number(product.quantity) - 1;updateCartQuantity(product.key,product.quantity)"
class="button"
>-</a>
</p>
<p class="control">
<input
class="input has-text-centered"
type="text"
placeholder="0"
style="width:80px"
readonly
:value="product.quantity"
:ref="product.product_id"
/>
</p>
<p class="control">
<a
class="button"
@click="product.quantity = Number(product.quantity) + 1;updateCartQuantity(product.key,product.quantity)"
>+</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="column is-narrow" style=" align-self:flex-start;margin-top:10px">
<div style="border:1px solid #eee; background:#f7f9fe; padding:20px 15px">
<div class="field has-addons">
<p class="control">
<input class="input is-ishtari-green" type="text" placeholder="Coupon Code" />
</p>
<p class="control">
<a class="button is-ishtari-green">Apply</a>
</p>
</div>
<div class="columns">
<div class="column">
<p class="has-text-weight-bold">Order Summary</p>
</div>
</div>
<div class="columns"></div>
<div v-for="total in cartData.totals" :key="total.code">
<div class="columns">
<div class="column">
<p>{{total.title}}</p>
</div>
<div class="column is-narrow">
<p>{{total.text}}</p>
</div>
</div>
</div>
</div>
<button
class="button is-ishtari-blue has-text-weight-bold"
style="display:block;width:100%;margin-top:10px"
>CHECKOUT NOW</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import VueCookies from "vue-cookies";
export default {
data() {
return {
cartData: [],
emptyCart: false,
loading: true
};
},
created() {
this.getCartContent();
},
methods: {
goHome() {
this.$router.push({ name: "home" }).catch(err => {
return err;
});
},
getCartContent() {
let requestHeader = {
Authorization: "Bearer " + VueCookies.get("token")
};
window.axios
.get(window.main_urls["get-cart"], { headers: requestHeader })
.then(response => {
if (response.data.error === "Cart is empty") {
this.emptyCart = true;
this.loading = false;
} else {
this.loading = false;
this.cartData = response.data.data;
}
});
},
updateCartQuantity(pkey, pquan) {
this.loading = true;
let requestHeader = {
Authorization: "Bearer " + VueCookies.get("token")
};
let requestBody = {
key: pkey.toString(),
quantity: pquan.toString()
};
window.axios
.put(window.main_urls["get-cart"], requestBody, {
headers: requestHeader
})
.then(response => {
if (response.data.success == "1") {
this.getCartContent();
this.$emit("getCartAgain");
}
});
},
}
};
</script>
<style scoped la>
.cart-product-row {
border-bottom: 1px solid #eee;
padding: 10px 0;
}
.cart-product-row:last-of-type {
border-bottom: none;
}
#cart-delete {
font-size: 20px;
cursor: pointer;
}
#cart-delete:hover{
transform: scale(1.05);
}
</style>
updateCartQuantity()
的函数在
Cart.vue
触发函数
getCartTotal()
在
Main.vue
最佳答案
Vuex 可能比你需要的多一点。您可以使用 pub/sub
通过创建一个导出新 vue 实例的简单文件,您可以监听该 Vue 实例上发出的事件:
//bus.js
import Vue from 'vue'
export default new Vue()
Main.vue
你可以导入:
import EventBus from '@/path/to/bus'
created
钩子(Hook)你可以设置一个监听器:
created() {
EventBus.$on('refresh_cart_total', this.getCartTotal)
}
$emit
来自您的
Cart.vue
的那个事件当你需要的时候。再次导入总线:
import EventBus from '@/path/to/bus'
Cart.vue
需要时调用它:
EventBus.$emit('refresh_cart_total')
bus.js
中实现常量。 , 如:
export const REFRESH_CART_TOTAL = 'refresh_cart_total'
import * as CART_CONSTANTS from '/path/to/bus'
并使用此方法:
EventBus.$on(CART_CONSTANTS.REFRESH_CART_TOTAL, this.getCartTotal)
EventBus.$emit(CART_CONSTANTS.REFRESH_CART_TOTAL)
关于javascript - Vue.js 如何在路由器 View 组件之间发出事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61034661/
使用 ui-router-ng2 有哪些优点和缺点?而不是新的 Angular2 路由器?过去我使用 ui-router 和 Angular 1.x 而不是使用 ngRoute,因为我需要更好地支持嵌
本文主要记录个人对小米 WR30U 路由器的解锁和刷机过程,整体步骤与 一般安装流程 类似,但是由于 WR30U 的解锁 ssh 和刷机的过程中有一些细节需要注意,因此记录一下 解锁
我有路由器 { path: 'reset-password', component: ResetPasswordComponent, } 我希望能够将其作为直接链接 (/reset-passw
所以,我试图制作一个具有 Backbone 的示例应用程序,但我无法使路由器工作,对此有什么想法吗?谢谢。这是我的路由器 var Workspace = Backbone.Router.extend(
我正在研究分布式应用程序。网络基于ZMQ(jeromq),这是我的架构: N Clients (Dealer socket) (Router) Proxy (Dealer) 1 (Dealer)
In this plunk我有一个 ui-router $state.goto这仅在第一次有效,即使我增加了 seq变量以强制重新加载。看到时间戳没有改变。这段代码有什么问题? HTML G
我有面包屑组件,测试如下。测试应覆盖75%以上。测试失败,因为 ActivatedRoute.root.children 未定义。谁知道我该如何定义它?我需要至少一个 children 作为 root
我正在使用 RC5 和 "@angular/router": "3.0.0-rc.1" 我似乎无法捕捉到旧路线(示例): /category/subcategory/subcategory/artic
我确实有一个延迟加载模块,当我转到 /lazy 时默认加载 LazyLoadedComponent。到目前为止,没问题。 此组件包含 2 个路由器 socket : 模块有以下路由: const
我试图用不同的参数路由到当前页面,但没有成功。我有一个触发的组合框: this.router.navigate(['page', selectedId]); Url 正在更改,仅此而已。 如何使用不同
我正在尝试使用 React 路由器构建 SPA。当我使用链接导航时,它工作得很好,但是刷新或写入 url 时,它给我 cannot GET/(any route except main)。我试图将 h
我无法在我的 app.js 文件中添加样式。 div 在路线内不起作用。有没有其他方法可以在路由中添加样式? : } /> } /> }> } />
根据用户角色在 react-router 中有条件地呈现路由的最佳方法是什么。我有一个案例,并非所有角色都有权查看某些路线。而且我还需要处理子路线。因此,如果主要路线之一类似于/posts,我只希望
我想使用 Flash 的 RTMFP 对等协议(protocol),但我想知道它是否值得为主流受众开发?据我了解,它使用 UDP,除非用户的防火墙/路由器配置正确,否则它变得毫无用处。 这个问题有解决
我有一 strip 有 waitOn 的路线返回 Meteor.subscribe 的钩子(Hook).每次触发路线时,我都会从我的 loadingTemplate 中看到微调器在看到实际数据之前简要
所以我最近开始尝试使用 createMemoryHistory,因为我正在构建一个将在 iframe 中呈现的应用程序。幸运的是,单击 UI 按钮,我可以在不修改 url 的情况下四处导航。但是,当我
我在我的 React redux 应用程序中使用 connected-react-router。我需要服务器端渲染和客户端渲染(我通过 limenius react bundle 在 symfony
我是一名 ios 开发人员,并试图找出 viper 架构中的路由器和 coordinator 之间的区别。 我真的找不到明确的答案是协调器只是被认为是一种模式,所以路由器毕竟只是某种协调器还是它们有不
我想要这样的东西: if ($state.get("^")) $state.go("^"); else $location.path('/'); 但它显然不起作用(即使没有父状态,它也总是与 $sta
当我从 react-router-dom 使用 BrowserRouter 时,我的路由正在工作。但是为了使用自定义历史记录,我用来自 react-router 的 Router 替换了 Browse
我是一名优秀的程序员,十分优秀!