====== Vue Developer Interview ======

请用<wrap hi>Vue.js 2.0</wrap>或<wrap hi>Vue.js .0</wrap>以 "SFC 单文件组件" 编码方式完成以下购物车题目。除了<wrap hi>Vue.js 2.0</wrap>, <wrap hi>Vue.js 3.0</wrap>, bootstrap 外，请尽量少用第三方库。不可使用Element UI, Mint UI等第三方库。

^ 时限 | 1小时 |
^ 提交方法 | 只需要把相关的.js和.vue文件用ZIP（不可用RAR或其他格式）压缩后电邮代码至 joe.mao@gz.questwork.com 和 don.lee@questwork.com。不要把脚手架文件如node_modules和第三方插件压缩在内。 |

<note warning>电邮內必须寫下你的名字和微信号，另外再附上你的pdf簡历，否则不予处理。</note>


===== 目标 =====

  * 提供前端端购物车功能


===== 购物车外观 =====

以下只是参考。

{{:interview:developer:vue_developer:screenshot_2019-09-08_at_6.15.55_pm.png?800|}}

===== 购物车功能 =====

  * 自动计算总金额（必须）
  * 能删除已选择产品
  * 能更改数量
  * 能按產品名稱排序


===== 数据结构 Data Structure =====

购物车数据为本地数据，不必从网上撷取。

<code>
[
{ id: 1, name: "Chicken Wing", category: "Food", qty: 3, price: 10 },
{ id: 2, name: "Pizza", category: "Food", qty: 1, price: 50 },
{ id: 3, name: "Hamburger", category: "Food", qty: 1, price: 12 },
{ id: 4, name: "Coca Cola", category: "Drink", qty: 2, price: 5 },
{ id: 5, name: "Orange Juice", category: "Drink", qty: 1, price: 15 },
{ id: 6, name: "Potato Chips", category: "Snack", qty: 1, price: 8 },
]
</code>

===== 评分准则 =====

  * SFC组件设计
  * 编码整洁
  * 外覌

===== 加分项 =====

  * 组件化，模块化代码。（e.g List.vue, Button.vue)
  * 使用Vue的API计算商品总价、ES6的新规范新API处理数组等