Question

我想根据url页面中的id从JSON API获取数据。首先，我有我的表的代码，其链接取决于转到第二个表模板的URL ID：

ALTER PROCEDURE dynamic_tbl (@tablename varchar(50))

AS 
BEGIN

DECLARE @ColumnCount int
DECLARE @rowcount TABLE (Value int);
INSERT INTO @rowcount
EXEC('select MAX(len(ITEMQTY) - len(replace(ITEMQTY, '','', '''')) +1) from '+@tablename);
SELECT @ColumnCount = Value FROM @rowcount;



    Declare @ColumnName nvarchar(10)='qty_'
    Declare @count int =0
    IF(@ColumnCount>0)
    BEGIN
        IF (EXISTS (SELECT * FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA = 'dbo' AND  TABLE_NAME = 'dyn_tbl'))
        BEGIN
        DROP TABLE dyn_tbl
        END

        select * into dyn_tbl from inputtable 
        SET @count=@count +1;
        WHile(@ColumnCount>=@count) 
        BEGIN
            SET @ColumnName='qty_'+CONVERT(varchar(2),@count)
            EXEC ('ALTER TABLE dyn_tbl ADD ['+@ColumnName +'] varchar(20)')

            declare @myvar as varchar(max)

            set @myvar='update '+@tablename+' set '+@ColumnName +' =itemQty'

--exec dynamic_tbl 'dyn_tbl'

--select * from dyn_tbl

            --CAST('<A>'+REPLACE(ITEMQTY, ',', '</A><A>')+'</A>' AS XML)
            print @myvar

            exec(@myvar)



            SET @count=@count +1;
        END
    END

----
END

我的第二个表格中，我只想根据ID显示我的数据：

<table class="table table-condensed">
    <tr style="text-align:left;" v-for="data in metadata">
        <td>{{data.id}}</td>
        <td><router-link :to="{ name: 'mixtapesDetails', params{id : data.id}}">
            {{data.title}}
        </router-link></td>
        <td><router-link :to="{ name: 'mixtapesDetails', params{id : data.id}}">
            {{data.artist}}
        </router-link></td>
    </tr>
</table>

然后我有我的Js函数来获取我的所有数据：

    <div style="margin-left:400px;">
        <div>{{$route.params.id}}</div>
        <table class="table table-condensed">
            <tr>
                <th>ID</th>
            </tr>
            <tr style="text-align:left;" v-for="data in metadata">
                <td>{{data.id}}</td>
                <td>{{data.title}}</td>
                <td>{{data.artist}}</td> 
                <td>{{data.cover}}</td>

            </tr>
        </table>
    </div>

然后我在JS中有我的路线：

export default {
  data(){
    return {
        metadata: null
    }
  },
  methods:{
    httpGet(theUrl){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", theUrl, false); // true for asynchronous request
    xmlHttp.send(null);
    console.log(JSON.parse(xmlHttp.responseText));
    return JSON.parse(xmlHttp.responseText);
    }
  },
  mounted(){
    this.metadata = this.httpGet("urltooJsondata");
  }
}

目标是，当我点击路由器链接时，它会转到一个页面，其中包含类似于/ mixtapesdetails / id的URL，我希望该页面上显示的数据是与该URL对应的数据标识。

我真的需要帮助，但我没有在网上找到解决方案。

Answer 1

我认为为此目的存在$route.params个对象。所以如果你有这样的路线，

{
  path: '/mixtapesDetails/:anything',
  name: 'mixtapesDetails',
  component: mixtapesDetails
}

在mixtapesDetails组件实施中，您可以使用:anything访问$route.params.anything路径段值。

根据vueJS中的url id过滤表数据

1 个答案: