vue修改下单按钮的SendOrder，添加上index参数、修改函数语句，使得点击不同的下单按钮，控制台输出不同的书名和价格。 完成后运行截图。

在Vue中，为了实现这个需求，你需要将每个下单按钮视为独立的组件，并传递`index`参数到共享的方法`sendOrder`。在这个方法里，你可以根据不同的索引获取对应的商品数据并打印到控制台。下面是一个简单的示例：

首先，假设你的商品列表存储在一个数组`books`中，其中每个对象都有`name`和`price`属性：

<template>
  <div>
    <button v-for="(book, index) in books" @click="sendOrder(index)">
      下单{{ book.name }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [
        { name: '书籍A', price: 100 },
        { name: '书籍B', price: 200 },
        // 更多书籍...
      ],
    };
  },
  methods: {
    sendOrder(index) {
      const selectedBook = this.books[index];
      console.log(`点击了 ${selectedBook.name}，价格为${selectedBook.price}`);
    },
  },
};
</script>

当你点击不同的按钮时，控制台会输出相应书籍的名称和价格。记得在实际项目中，你应该将这个逻辑放在服务器端或者API请求中，这里仅作演示用途。

完成后的运行截图无法直接提供，因为这依赖于实际环境的展示。如果你在本地运行上述代码，打开开发者工具查看控制台，就能看到效果。